Bootstrap-笔记

移动设备优先:

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

Bootstrap 网格系统

  1. 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
  2. 使用行来创建列的水平组。
  3. 内容应该放置在列内,且唯有列可以是行的直接子元素。
  4. 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
  5. 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
  6. 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="container">
<div class="row">
<div class="col-md-3">
<h4>第一列</h4>
</div>
<div class="col-md-9">
<h4>第二列 - 分为四个盒子</h4>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>

列排序: 您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序,其中 * 范围是从 1 到 11。 在下面的实例中,我们有两列布局,左列很窄,作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。 Bootstrap 网格系统实例:堆叠的水平

1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
<div class="row">
<div class="col-md-6">
<p> </p>
<p> </p>
</div>
<div class="col-md-6">
<p> </p>
<p> </p>
</div>
</div>
</div>

Bootstrap 网格系统实例:中型和大型设备

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">
<p> </p>
<p> </p>
</div>
<div class="col-md-6 col-lg-8">
<p> </p>
<p> </p>
</div>
</div>

Bootstrap 网格系统实例:手机、平板电脑、台式电脑

1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-8">
<p> </p>
<p> </p>
</div>
<div class="col-sm-9 col-md-6 col-lg-4">
<p> </p>
<p> </p>
</div>
</div>
</div>

引导主体副本:为了给段落添加强调文本,则可以添加 class=”lead”,这将得到更大更粗、行高更高的文本 强调:HTML 的默认强调标签 (设置文本为父文本大小的 85%)、(设置文本为更粗的文本)、(设置文本为斜体) 缩写:Bootstrap 定义 元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为 title 属性添加了文本)。为了得到一个更小字体的文本,请添加 .initialism 到 。 地址:由于

默认为 display:block;,您需要使用标签来为封闭的地址文本添加换行。
引用:您可以在任意的HTML文本旁使用默认的。其他选项包括,添加一个 标签来标识引用的来源,使用 .pull-right向右对齐引用。

更多类排版:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.lead 使段落突出显示 
.small 设定小文本 (设置为父文本的 85% 大小)
.text-left 设定文本左对齐
.text-center 设定文本居中对齐
.text-right 设定文本右对齐 尝试一下
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母
.blockquote-reverse 设定引用右对齐
.list-unstyled 移除默认的列表样式。这个类仅适用于直接子列表项(如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行
.dl-horizontal 该类设置了浮动和偏移,应用于 `<dl>` 元素和 `<dt>` 元素中
.pre-scrollable 使
  • 版权声明: 本博客所有文章,未经许可,任何单位及个人不得做营利性使用!转载请标明出处!如有侵权请联系作者。
  • Copyrights © 2015-2020 翟天野

请我喝杯咖啡吧~