bootstrap框架之基本CSS样式
排版
标题
从 <h1> 到 <h6> 所有的HTML标题都是可用的.
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Body copy
Bootstrap定义的全局 font-size 是 14px，line-height 是 20px。这些样式应用到了 <body> 和所有的段落上。另外，对 <p> (段落)还定义了1/2行高(默认为10px)的底部外边距(margin)属性。
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Lead body copy
要突出一个段落只需加 .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
构建在Less
排版规模是在variables.less这2个LESS变量: @baseFontSize and @baseLineHeight的基础上.
第一个是贯穿整个font-size, 第二个是line-heightThe. 我们使用这些变量和一些简单的数值来创建margin, padding, 和 line-height 等等类型.
强调
<small>
强调内嵌和文本块, 使用小标签.
This line of text is meant to be treated as fine print.
<p> <small>This line of text is meant to be treated as fine print.</small> </p>
加粗
用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>
注意! 在HTML5可随意使用 <b> 和 <i>, <b>是为了突出词或短语,
而不会有其他重要含义, 而 <i> 提供主要是语态, 专业术语等含义.
对齐
简单方便将文字对齐的属性.
居左文字.
居中文字.
居右文字.
- <p class="text-left">居左文字.</p>
- <p class="text-center">居中文字.</p>
- <p class="text-right">居右文字.</p>
强调的属性
通过一些颜色属性来强调.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
- <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
- <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
- <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
- <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
缩写
参照在鼠标悬停在缩写和缩写词就显示完整内容的HTML的<abbr> 元素.
abbr元素带有 title 属性之后, 缩写的部分的底部会有一条虚线,
并且鼠标悬停在上面会有一个“帮助”符号, 同时还会显示title所提供的内容.
<abbr>
如想看完整文字可把鼠标悬停在缩写词, 但需要包含 title 属性.
An abbreviation of the word attribute is attr.
<abbr title="attribute">attr</abbr>
<abbr class="initialism">
如需对缩写词字体大小稍微缩小, 可添加 .initialism .
HTML is the best thing since sliced bread.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址
让联系信息最接近原始格式的形式呈现.
<address>
换行使用 <br>.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Full Name
[email protected]
- <address>
- <strong>Twitter, Inc.</strong><br>
- 795 Folsom Ave, Suite 600<br>
- San Francisco, CA 94107<br>
- <abbr title="Phone">P:</abbr> (123) 456-7890
- </address>
- <address>
- <strong>Full Name</strong><br>
- <a href="mailto:#">[email protected]</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>
引用选项
在标准的引用里, 可以很简单的改变风格和内容.
标出来源
添加 <small>> 标签来注明引用的来源. 来源标题可以放在这个<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>
- <small>Someone famous <cite title="Source Title">Source Title</cite></small>
- </blockquote>
备用显示
使用 .pull-right 属性, 可让引用向右靠齐.
- <blockquote class="pull-right">
- ...
- </blockquote>
列表
无序列表
用于没有明确信息的列表.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- <ul>
- <li>...</li>
- </ul>
有序列表
用于有明确或需按序号排序的信息的列表.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- <ol>
- <li>...</li>
- </ol>
无样式列表
用于不需要列表样式的列表里.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- <ul class="unstyled">
- <li>...</li>
- </ul>
行(水平)列表
使用 inline 让列表项水平排列一行, 同时每项之间都有一定的间距.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
- <ul class="inline">
- <li>...</li>
- </ul>
描述
对一个(条款)列表进行关联描述.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- <dl>
- <dt>...</dt>
- <dd>...</dd>
- </dl>
水平状态的描述
使用<dl>把列表和对其的描述一对一横向显示.适用于术语的定义/解释
- A description list is perfect for defining terms.
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Etiam porta sem malesuada magna mollis euismod.
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- <dl class="dl-horizontal">
- <dt>...</dt>
- <dd>...</dd>
- </dl>
注意!水平描述通过text-overflow会对过长而无法在左栏中完全显示的列名截断掉一部分.
而在较窄的视口(宽度)中, 会改变成垂直(形式)表述, 来适应当前屏幕.