第一次接触神奇的Bootstrap网格系统
Bootstrap是一款流行的前端开发框架,其中最具特色的功能莫过于它的网格系统了。本文将详细介绍如何利用Bootstrap网格系统进行前端页面布局。
什么是Bootstrap网格系统
Bootstrap网格系统是一种通过12个栅格列来进行页面布局的系统。栅格列可以覆盖整个页面宽度,也可以将页面分成多个部分。
默认情况下,Bootstrap网格系统将整个页面分成12列宽度相等的栅格列。每列的宽度默认为1/12,即每行最多可以包含12个栅格列,每个栅格列的宽度可以用class="col-*"来指定。其中的星号代表了该列的宽度占总宽度的百分比,例如指定class="col-6"的栅格列就占据了页面总宽度的50%。
如果页面需要分成多个部分进行布局,可以使用container和row两个类来进行划分。在container类内部,通过row类来把整个容器分成一行一行;在row类内部,通过class="col-*"来定义每一列宽度的大小。
如何使用Bootstrap网格系统
下面通过两个示例来展示如何使用Bootstrap网格系统进行页面布局。
示例一:分栏
考虑一个页面需要进行两栏布局,左边栏宽度为2/5,右边栏宽度为3/5。
首先,在页面中添加container和row类:
<div class="container">
<div class="row">
</div>
</div>
然后,在row类内部添加两个col类,分别设置宽度为col-5和col-7,代码如下:
<div class="container">
<div class="row">
<div class="col-5">
左边栏
</div>
<div class="col-7">
右边栏
</div>
</div>
</div>
最后,在col类内部添加具体的内容即可。
示例二:响应式
在移动设备上显示的页面布局往往需要与在PC端显示的页面布局不同。Bootstrap网格系统还提供了响应式栅格用于在不同设备上显示不同的布局。
下面考虑一个页面,在PC端上采用两栏布局,在移动设备端上采用一栏布局。
首先,在col类中添加class="col-md-"和class="col-sm-",表示在不同设备上显示不同的布局。例如,在PC端上col类的宽度为5,代码如下:
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-12">
左边栏
</div>
<div class="col-md-7 col-sm-12">
右边栏
</div>
</div>
</div>
在移动设备端上col类的宽度为12,代码如下:
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-12">
左边栏
</div>
<div class="col-md-7 col-sm-12">
右边栏
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
页面主内容
</div>
</div>
</div>
这样,在PC端上页面会呈现两栏布局,在移动设备端上页面会呈现一栏布局。同时,container和row类的作用也是非常关键的,container类的作用是限定页面宽度,row类的作用是限定每行内col类宽度之和。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:第一次接触神奇的Bootstrap网格系统 - Python技术站