返回
bootstrap布局之栅格系统详解_javascript技巧

bootstrap布局之栅格系统详解_javascript技巧

ID：30766903

大小：87.95 KB

页数：5页

时间：2019-01-03

bootstrap布局之栅格系统详解_javascript技巧_第1页
bootstrap布局之栅格系统详解_javascript技巧_第2页
bootstrap布局之栅格系统详解_javascript技巧_第3页
bootstrap布局之栅格系统详解_javascript技巧_第4页
bootstrap布局之栅格系统详解_javascript技巧_第5页
资源描述：

《bootstrap布局之栅格系统详解_javascript技巧》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、Bootstrap布局之栅格系统详解前些犬学习了bootstrap,把其中的栅格系统整理出來，如有错误，欢迎指止。概耍，栅格系统针对pc,pad,移动端开发出响应式web页面，根据不同屏幕分辨率有针对不同的解决方法。(0.1,屏幕设备尺寸大于1200px选择col-lg(0.2.屏幕设备尺寸在970px到1200px选择col-md(0.3.屏幕设备尺寸在768px到970px选择col-sm(0.4.屏幕设备尺寸小于768px选择col-xs1・栅格系统把页面分为12栏(最多12栏)，如下：

2、ang=zzzh-cn，z>栅格系统<1inkrel二〃stylesheet"href=z，library/bootstrap.min.css，z>・a{height:50px;border:lpxredsolid;background:pi

3、nk;}l

az/>l
a，，>l
a〃>l〈/div>az，>l
az，>laz/>la，，>la〃>l〈/div>az，>laz，>lclass二"col-mdTclass二〃col-mdTclass二〃col-m

4、d-lclass二〃col-mdTclass=，，col-md-lclass二"col-mdTclass二〃col-mdTclass二〃col-md-lclass二〃col-mdTclass=，，col-md-lclass二"col—mdTl3〈/div>9

5、>〈/script>(2.1,col-md-1为一栏，合计12栏布满一个"横排〃，md后尾随的数字为分配的栏数，(col-lg,col-sm,col-xs同理)3•在不同屏幕分辨率的设备下，所呈现的页面为对应的〃栅格式栏数页面〃，从而实现响应式布局，如下代码：

6、t"contcnt=，，width二device-width,initial-scale二1,maxinum-scalc,uscr-scalable=no">栅格系统〈linkrel二〃stylesheet"href^^library/bootstrap.min.css〃>〈body〉

7、，，>lllg-3lg-3l

8、g-3lg-3lg-3lg-3lg-3lg-3lg-3lg-3col-md-4col-md-4col-md-4col-md-4col-md-4col-md-4col-md-4col-md-4col-md-4col-md-4col-sm

当前文档最多预览五页，下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页，下载文档查看全文
温馨提示：
1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。
2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。