bootstrap排版2: 标题h — 描述dl

发表于:2017-11-06 19:36 阅读:

标题:
HTML中的所有标题标签,<h1> 到 <h6> 均可使用。另外,还提供了 .h1 到 .h6 类,可以为内联(inline)属性的文本赋予标题样式。在标题内还可以包含 <small> 标签或赋予 .small 类的元素,以用来标记副标题。
 
 
页面主体:
Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> 元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。
 
 
突出段落:
通过为 <p> 添加 .lead 类可以让段落突出显示。
 
 
使用 Less 工具构建:
variables.less 文件中定义的两个 Less 变量决定了排版尺寸:@font-size-base 和 @line-height-base。第一个变量定义了全局 font-size 基准,第二个变量是 line-height 基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的 margin、 padding 和 line-height。自定义这些变量即可改变 Bootstrap 的默认样式。
 
 
标记文本:
为内联文本添加 <mark> 标签可标记文本(文字带浅黄背景色)。
 
 
删除文本:
<del>有删除线的文本</del>
 
 
无用文本:
<s>无用文本</s> (与删除文本相同样式)
 
 
插入文本:
<ins>插入的文本</ins> (与下划线文本样式相同)
 
 
下划线文本:
<u>带下划线的文本</u>
 
 
 斜体文本:
<em>斜体文本</em>
 
 
小号文本:
<small>小号文本</small> (文本将被设置为父容器字体大小的85%)
 
 
加粗和斜体:
<b> 用于高亮单词或短语,不带有着重意味;而 <i> 主要用于发言、技术词汇等(与斜体样式相同)。
 
 
对齐:
<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>
 
 
字母大小写:
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p> (首字母大写)
 
 
缩略语:
当鼠标悬停在缩写词上时会显示完整内容:
<abbr title="attribute">attr</abbr>
为缩略语添加 .initialism 类,可让 font-size 变得稍小些(变化极小)
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
 
 
地址:
让联系信息以最接近日常使用的格式呈现,每行结尾添加
 :
<address>
<strong>Twitter, Inc.</strong>
 
795 Folsom Ave, Suite 600
 
San Francisco, CA 94107
 
<abbr title="Phone">P:</abbr> (123) 456-7890
 
<a href="mailto:#">info@example.com</a>
</address>
 
 
引用:
在文档中引用其他来源的内容时可使用引用标签。默认样式的引用只需将任何HTML元素包裹在 <blockquote> 中,对于直接引用,建议使用 <p> 标签,如:
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</blockquote>
 
如需在引用内容下面添加作者或出处信息,可以这样(footer中的文字会变为灰色且加上破折号,cite中的文字为斜体):
<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添加 .blockquote-reverse 类会让引用块右对齐
<blockquote class="blockquote-reverse">
 
 
列表:
无序列表 <ul></ul>
有序列表 <ol></ol>
 
为无序或有序列表添加 .list-unstyled 类可移除默认的 list-style 和左侧外边距:
<ul class="list-unstyled">
 
通过设置 list-inline 将所有元素放置于同一行:
<ul class="list-inline">
 
 
描述:
带有描述的短语列表:
<dl>
<dt>短语</dt>
<dd>短语的描述</dd>
<dt>短语</dt>
<dd>短语的描述</dd>
</dl>
 
.dl-horizontal 类可以让 <dl> 内的短语及其描述排在一行
<dl class="dl-horizontal">


灵石网络专注于营销型网站设计、SEO搜索引擎优化、PHP开发、企业网络营销服务。


扫描二维码加我微信!