Bootstrap CSS
资料来源:Bootstrap 菜鸟教程
(一)概览
1.移动设备优先:确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width
确保网站能正确呈现在不同设备上
initial-scale=1.0
确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放
user-scalable=no
禁用其缩放(zooming)功能
maximum-scale=1.0
与 user-scalable=no
一起使用,禁用缩放功能后,用户只能滚动屏幕,就能让网站看上去更像原生应用的感觉。
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
2.响应式图像(可以让图像按比例缩放,不超过其父元素的尺寸)
<img src="..." class="img-responsive" alt="响应式图像">
要使其居中,用.center-block
类。
(二)网格系统
1.工作原理
- 行必须放置在
.container class
内,以便获得适当的对齐(alignment)和内边距(padding)。 - 使用行来创建列的水平组。
- 内容应该放置在列内,且唯有列可以是行的直接子元素。
- 预定义的网格类,比如
.row
和.col-xs-4
,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。 - 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过
.rows
上的外边距(margin)取负,表示第一列和最后一列的行偏移。 - 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个
.col-xs-4
。
2.网格选项
超小设备手机(<768px) | 小型设备平板电脑(≥768px) | 中型设备台式电脑(≥992px) | 大型设备台式电脑(≥1200px) | |
---|---|---|---|---|
网格行为 | 一直是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 |
最大容器宽度 | None (auto) | 750px | 970px | 1170px |
Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列数量和 | 12 | 12 | 12 | 12 |
最大列宽 | Auto | 60px | 78px | 95px |
间隙宽度 | 30px(一个列的每边分别 15px) | 30px(一个列的每边分别 15px) | 30px(一个列的每边分别 15px) | 30px(一个列的每边分别 15px) |
可嵌套 | Yes | Yes | Yes | Yes |
偏移量 | Yes | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes | Yes |
基本的网格结构
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
(三)排版
1.标题
<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>
内联子标题small
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
2.引导主体副本(给段落添加强调文本)class="lead"
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。</p>
3.强调
<small>
(设置文本为父文本大小的 85%)
<strong>
(设置文本为更粗的文本)
<em>
(设置文本为斜体)`
<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内,并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>
4.缩写(<abbr>
元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要为 <abbr>
title 属性添加了文本)。为了得到一个更小字体的文本,可以添加 .initialism
到 <abbr>
。)
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
5.地址(可以在网页上显示联系信息。由于 <address>
默认为 display:block;
,需要使用<br>
标签来为封闭的地址文本添加换行。)
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">mailto@somedomain.com</a>
</address>
6.引用
<blockquote>
<p>
这是一个默认的引用实例。
</p>
</blockquote>
<blockquote>
这是一个带有源标题的引用。
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
<blockquote class="pull-right">
这是一个向右对齐的引用。
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
7.列表
<h4>有序列表</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
8.更多排版类
类 | 描述 |
---|---|
.lead | 使段落突出显示 |
.small | 设定小文本 (设置为父文本的 85% 大小) |
.text-left | 设定文本左对齐 |
.text-center | 设定文本居中对齐 |
.text-right | 设定文本右对齐 |
.text-justify | 设定文本对齐,段落中超出屏幕部分文字自动换行 |
.text-nowrap | 段落中超出屏幕部分不换行 |
.text-lowercase | 设定文本小写 |
.text-uppercase | 设定文本大写 |
.text-capitalize | 设定单词首字母大写 |
.initialism | 显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母 |
.blockquote-reverse | 设定引用右对齐 |
.list-unstyled | 移除默认的列表样式,列表项中左对齐 (<ul>< |