关于BootStrap框架中的网格式布局详解,以及消除外边距和container-fluid属性的解释。
2017-07-25 16:13
483 查看
最近刚刚接触bootstrap框架,今天把网格化的不分了解了一下做一个总结。
bootstrap框架将网格分成了十二个列 在不同的分辨率下每个列的宽度也不一样,当然同时也提供了相应分辨率下设置列宽的样式。下面会提到。
要想在使用bootstrap框架中的网格,首先其中的列必须要放在行内,也就是class=”row”的div下,而row又必须放在container下,所以大致的使用方式像下面这样:
以上代码中的col开头的样式分别代表了大屏幕,中等屏幕,小屏幕,超小屏幕下的样式设置。
注意:必须要放在container下的row下边,否则会出现不可预见的错误。
具体的使用方法我在以下的代码中随便写了几种,方便以后回来查找,其中列的宽度可以随意改变以查看其相应的变化,有写地方也做了相应的注释,代码可以直接考下来运行查看效果。
网格式布局并不是很难,重点是理解,而且要根据实际的效果去理解,这样才可以熟悉并且灵活的使用,今天也只是写了一些简单的东西,还有列偏移之类的可以参考[(]http://www.runoob.com/bootstrap/bootstrap-grid-system.html)],在此就不一一列出。
bootstrap框架将网格分成了十二个列 在不同的分辨率下每个列的宽度也不一样,当然同时也提供了相应分辨率下设置列宽的样式。下面会提到。
要想在使用bootstrap框架中的网格,首先其中的列必须要放在行内,也就是class=”row”的div下,而row又必须放在container下,所以大致的使用方式像下面这样:
<div class="container"> <div id="" class="row"> <div id="" class="col-lg-1 col-md-3 col-sm-2 col-xs-4" style="background-color: orange;"> </div> </div> </div>
以上代码中的col开头的样式分别代表了大屏幕,中等屏幕,小屏幕,超小屏幕下的样式设置。
注意:必须要放在container下的row下边,否则会出现不可预见的错误。
具体的使用方法我在以下的代码中随便写了几种,方便以后回来查找,其中列的宽度可以随意改变以查看其相应的变化,有写地方也做了相应的注释,代码可以直接考下来运行查看效果。
<body> 网格一:普通的网格,只是根据屏幕的大小设置的列宽度不一样 列宽度为按屏幕从大到小设置 <div class="container"> <div id="" class="row"> <div id="" class="col-lg-1 col-md-3 col-sm-2 col-xs-4" style="background-color: orange;"> col-lg-12 col-md-4 col-sm-6 </div> <div id="" class="col-lg-2 col-md-2 col-sm-1 col-xs-4" style="background-color: red;"> col-lg-12 col-md-4 col-sm-6 </div> <div id="" class="col-lg-3 col-md-1 col-sm-3 col-xs-4" style="background-color: black;"> col-lg-12 col-md-4 col-sm-6 </div> </div> </div> 网格二: <div id="" style="width: 500px;"> <!--使用container-fluid样式 可以让以下的div的最大宽度为父节点宽度,若直接使用container则以下的父节点宽度视为响应宽度--> <div id="" class="container-fluid"> <div id="" class="row"> <div id="" class="col-lg-1 col-md-3 col-sm-2 col-xs-4" style="background-color: orange;"> col-lg-12 col-md-4 col-sm-6 </div> <div id="" class="col-lg-2 col-md-2 col-sm-1 col-xs-4" style="background-color: red;"> col-lg-12 col-md-4 col-sm-6 </div> <div id="" class="col-lg-3 col-md-1 col-sm-3 col-xs-4" style="background-color: black;"> col-lg-12 col-md-4 col-sm-6 </div> </div> </div> </div> 网格三 列中嵌套:在列中嵌套时 如果要根据父列宽度进行网格化 也应该加上container-fluid样式 道理参考网格二中的注释 <div id="" class="container"> <div id="" class="row" > <div id="" class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color: orange;"> <div id="" class="container-fluid" style="margin: 0; padding: 0;"> <div id="" class="row" > <div id="" class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="background-color: red; padding-right: 10px;"> sdfdsfdsfsdf </div> <div id="" class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="background-color: green;padding-right: 10px;"> sdfsdfds </div> <div id="" class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="background-color: purple; padding-right: 10px;"> sdfsdfds </div> </div> </div> a089 ; </div> <div id="" class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color: red;"> style="background-color: red;" </div> </div> </div> <!--网格三中的嵌套布局中发现会有一定的外边距可以通过设置嵌套列的container的 padding 等于 0 来消除外边距。--> </body>
网格式布局并不是很难,重点是理解,而且要根据实际的效果去理解,这样才可以熟悉并且灵活的使用,今天也只是写了一些简单的东西,还有列偏移之类的可以参考[(]http://www.runoob.com/bootstrap/bootstrap-grid-system.html)],在此就不一一列出。
相关文章推荐
- 关于Html中的title属性内容换行,以及Bootstrap的tooltip的使用
- 关于Android开发中布局属性weight的解释
- Android 布局详解 -三表格布局(TableLayout)以及重要属性
- 关于C语言中不同类型的输出格式以及浮点数除法格式的显示详解
- 关于UI布局中的常见布局类型、控件、控件属性以及引入布局的说明
- Android 布局详解 -三表格布局(TableLayout)以及重要属性
- 关于android布局属性tools:context最通俗的解释
- Android 布局详解 -三表格布局(TableLayout)以及重要属性
- Android 布局详解 -三表格布局(TableLayout)以及重要属性
- Bootstrap框架中的插件.container以及网格系统
- 详解Angular-ui-BootStrap组件的解释以及使用
- 关于前端框架BootStrap和JQueryUI(以及相应的优秀模板)
- Android 布局详解 -二相对布局(Relative Layout)以及重要属性
- bootstrap的常用组件和栅格式布局详解
- Android 布局详解 -一线性布局以及重要属性
- ios:UIView动画总结[转]IPhone中UIView中动画及其属性说明[转]详解UIScrollView[转]以及cocos2d框架简介[转]Automator重命名文件介绍[转]
- 关于前端框架BootStrap和JQueryUI(以及对应的优秀模板)
- BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))
- Bootstrap框架的学习教程详解(二)
- 数据库分库分表(sharding)系列(三) 关于使用框架还是自主开发以及sharding实现层面的考量