2020-05-24  点击量: 126

Bootstrap笔记

来源:https://www.runoob.com/bootstrap/bootstrap-tutorial.html

开头包含下面的代码段

<!DOCTYPE html>
<html>
....
</html>

为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

响应式图像

<img src="..." class="img-responsive" alt="响应式图像">

避免跨浏览器的不一致

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。

Normalize.css 是一个很小的 CSS 文件,在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

容器(Container)

<div class="container">
...
</div>

Bootstrap 3 的 container class 用于包裹页面上的内容。

Bootstrap 网格的基本结构

<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....

网格系统是通过指定您想要横跨的12个可用的列来创建的。

Bootstrap 网格系统如何跨多个设备工作:

超小设备手机(<768px)小型设备平板电脑(≥768px)中型设备台式电脑(≥992px)大型设备台式电脑(≥1200px)
网格行为一直是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的
最大容器宽度None (auto)750px970px1170px
Class 前缀.col-xs-.col-sm-.col-md-.col-lg-
列数量和12121212
最大列宽Auto60px78px95px
间隙宽度30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
可嵌套YesYesYesYes
偏移量YesYesYesYes
列排序YesYesYesYes

为了在大屏幕显示器上使用偏移,请使用 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。

为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。

Bootstrap 网格系统另一个完美的特性,就是您可以很容易地以一种顺序编写列,然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序,其中 * 范围是从 1 到 11。

col-md-offset-3(在左侧补充3列)
col-md-push-8(从左侧往右侧推8列)
col-md-pull-2(往左侧拉2列)

 

 

 

 

 

 

 

 

 

 

评论已关闭!