Bootstrap学习笔记-来自bootcss网站的v3教程。
概览：
1，定义：一种HTML，CSS和JS框架，响应式布局，依赖于Jquery，优先于移动Web的项目。
2，要求设置HTML5Doctype
3，响应式的meta标签，将viewpoint的meta标签添加在head中。
<meta charset="UTF-8" name="viewpoint" content="width=device-width, initial-scale=1,shrink-to-fit=no">
4，布局容器，需要为页面内容和栅格系统包裹在.container容器。
其中，.container类用于固定宽度并支持响应式布局的容器，而.container-fluid类用于100%宽度，占据全部视图的容器。
5，排版与链接，设置了基本的全局样式，可以在scaffolding.less文件中找到相应的源码。
6，使用Normalize.css，CSS重置样式库。
栅格系统：
一套响应式、移动设备优先的流失栅格系统，随着屏幕和视口尺寸的增加，系统会自动分为最多12列，包含了易于使用的预定义类，还有强大的
mixin用于生成更具有语义的布局。
简介：栅格系统用于通过一系列的行（row）和列（column）的组合来创建页面布局。
行row必须包含.container（固定宽度）和.container-fluid（100%宽度）中，以便赋予核实的排列（aligment）和内补（padding）。
通过行row在水平方向创建一组列col。
类似.row和.col-xs-4这种预设定的类，可以用来快速创建栅格布局。
通过为列设置padding属性，创建列与列的间隔。
实例：
媒体查询
在栅格系统中，我们在less文件中使用@media来创建关键的分界点阈值。
/* 小屏幕（平板，大于768px） */
@media(min-width:@screen-sm-min){ …… }
/* 中等屏幕 电脑桌面等，大于等于992px */
@media(min-width:@screen-md-min){ …… }
/* 大屏幕 大桌面显示器，大于等于1200px */
@media(min-width:@screen-lg-min){ …… }在媒体查询代码中包含max-width从而将CSS影响限制在在更小的范围屏幕之内。
例如：
@media(min-width:@screen-sm-min)and(max-width:@screen-sm-max){……}通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 | None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
从堆叠到水平排列
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
嵌套列
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
排版
标题：HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
页面主体：Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
中心内容：通过添加 .lead 类可以让段落突出显示。
内联文本元素
Marked text
For highlighting a run of text due to its relevance in another context, use the <mark> tag.
You can use the mark tag to highlight text.
You can use the mark tag to <mark>highlight</mark> text.被删除的文本
对于被删除的文本使用 <del> 标签。
This line of text is meant to be treated as deleted text.
<del>This line of text is meant to be treated as deleted text.</del>无用文本
对于没用的文本使用 <s> 标签。
This line of text is meant to be treated as no longer accurate.
<s>This line of text is meant to be treated as no longer accurate.</s>插入文本
额外插入的文本使用 <ins> 标签。
This line of text is meant to be treated as an addition to the document.
<ins>This line of text is meant to be treated as an addition to the document.</ins>带下划线的文本
为文本添加下划线，使用 <u> 标签。
This line of text will render as underlined
<u>This line of text will render as underlined</u>利用 HTML 自带的表示强调意味的标签来为文本增添少量样式。
小号文本
对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的 <small> 元素被设置不同的 font-size 。
你还可以为行内元素赋予 .small 类以代替任何 <small> 元素。
This line of text is meant to be treated as fine print.
<small>This line of text is meant to be treated as fine print.</small>着重
通过增加 font-weight 值强调一段文本。
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>斜体
用斜体强调一段文本。
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>Alternate elements
在 HTML5 中可以放心使用 <b> 和 <i> 标签。<b> 用于高亮单词或短语，不带有任何着重的意味；而 <i> 标签主要用于发言、技术词汇等。
对齐
通过文本对齐类，可以简单方便的将文字重新对齐。
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>改变大小写
通过这几个类可以改变文本的大小写。
lowercased text.
UPPERCASED TEXT.
Capitalized Text.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。
基本缩略语
An abbreviation of the word attribute is attr.
<abbr title="attribute">attr</abbr>首字母缩略语
为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。
HTML is the best thing since sliced bread.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>多种引用样式
对于标准样式的 <blockquote>，可以通过几个简单的变体就能改变风格和内容。
命名来源
添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>另一种展示风格
通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
<blockquote class="blockquote-reverse">
...
</blockquote>
扫一扫
3161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
