关于BootStrap框架中的网格式布局详解,以及消除外边距和container-fluid属性的解释。
来源:互联网 发布:ubuntu caffe gpu 编辑:程序博客网 时间:2024/06/16 09:24
最近刚刚接触bootstrap框架,今天把网格化的不分了解了一下做一个总结。
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> </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)],在此就不一一列出。
阅读全文
0 0
- 关于BootStrap框架中的网格式布局详解,以及消除外边距和container-fluid属性的解释。
- bootstrap中的container类和container-fluid类的区别
- bootstrap中container类和container-fluid类的区别
- bootstrap中container类和container-fluid类的区别
- 布局容器container 和流式布局容器container-fluid
- Bootstrap : container 和container-fluid区别
- container和container-fluid之间的区别
- Bootstrap之container与container-fluid
- container-fluid container的区别
- Bootstrap 响应式网格布局
- bootstrap布局:网格布局
- 关于UI布局中的常见布局类型、控件、控件属性以及引入布局的说明
- bootstrap中contain和contain-fluid的区别
- bootstrap中的container类和container_fluid类的区别
- Bootstrap-网格布局系统
- bootstrap网格布局
- Bootstrap网格布局
- bootstrap布局 网格系统
- codeforces 124A The number of positions
- 阿里云/腾讯 云服务器的使用方法
- 多态中方法的重写和方法的重载
- 地址、数据、控制总线
- MySQL优化sql查询的30种方法
- 关于BootStrap框架中的网格式布局详解,以及消除外边距和container-fluid属性的解释。
- CQBZOJ 3380 (NOIP 膜你题2 T3) 小Q的新玩具
- path-sum i & ii
- windows 安装nginx服务 出错
- MySQL通过IP来访问数据库的权限解决方法
- 【独家资源分享】如何成为一个优秀的架构师?
- Spring StateMachine框架实现状态机
- Android APP启动白屏,秒开解决方法
- 2017-7-24JAVA WEB 总结