Bootstrap页面布局基础知识全面解析

Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的!

今天主要说下页面的布局,这是最基础的东西了,当我们设计一个站点时,应该为它设计一个全局性的统一的规范页面,这种页面我们叫它布局页,而在页面上体现出来的东西,就是布局的元素,在bootstrap里当然也是不可缺少的东西。

Bootstrap的布局是一种栅格系统,即它由行和列组成,在使用时需要为页面内容和栅格系统包裹一个 .container 容器。

一 .container 类用于固定宽度并支持响应式布局的容器。

rush:js;">
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

<div class="container-fluid">
...

二 栅格系统的行和列

,在bootstrap里,行和列使用row和col表示,而一行中最多有12个列单元组成,col-md-1表示占用1个单元的宽度,而col-md-7表示占用7个单元的宽度,它们加在一起最多为12个单元

rush:js;">

第二和第三行显示出来的效果类似这样

三 嵌套列,列中还可以有列

,这种嵌套我们需要把md改为sm

rush:js;">

效果类似于这样

以上所述是小编给大家介绍的Bootstrap页面布局基础知识。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...