JavaWeb05-HTML篇笔记（二）

时间：2018-05-10 15:44:01 阅读：144 评论：0 收藏：0 [点我收藏+]

标签：Java

1.3 案例二：使用BootStrap设计一个响应式的页面：
1.3.1需求：
设计一套页面能够通用在不同的设备上,在手机,pad上,电脑上都可以浏览这个网页,而不影响正常的浏览的方式.
1.3.2分析：
1.3.2.1技术分析：
【BootStrap的概述】
技术分享图片

?什么是BootStrap
?BootStrap可以在那些地方使用:
BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问.
?BootStrap的使用:
下载BootStrap:
http://www.bootcss.com
技术分享图片

引入的文件

添加一个<meta>标签：
技术分享图片

【BootStrap的全局CSS】
BootStrap的框架提供了一系列的CSS的样式.这些样式可以直接使用.
?布局容器：
技术分享图片

?栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
使用.row样式定义栅格的行.
定义列：.col-lg-n .col-md-n .col-sm-n .col-xs-n
技术分享图片
?排版：

【BootStrap的组件】

【BootStrap的JS的插件】

1.3.3代码实现

JavaWeb05-HTML篇笔记（二）

标签：Java

原文地址：http://blog.51cto.com/13517854/2114843

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行