Bootstrap本次知识点
1.标题
2.内联文本元素
3.缩略语
4.地址
5.引用
6.列表
7.代码
1.标题
从h1到h6
<h1>Bootstrap排版样式</h1> //36px
Bootstrap排版样式
Bootstrap排版样式
Bootstrap排版样式
Bootstrap排版样式
Bootstrap排版样式
2.内联文本元素
添加标记：
mark:<mark>元素或.mark类。
<p>Bootstrap<mark>排版</mark></p>各种加线条的文本：
del:删除的文本 。
<del>Bootstrap排版</del>s:无用的文本。
<s>Bootstrap 排版</s>ins:插入的文本。
<ins>Bootstrap 排版</ins> u:效果同上，下划线文本。
<u>Bootstrap 排版</u>各种强调的文本：
small:标准字号的85%。
<small>Bootstrap 排版</small>strong:加粗700。
<strong>Bootstrap 排版</strong>em:倾斜。
<em>Bootstrap 排版</em>文本元素显示方式：
text-left:向左对齐文本。
<p class="text-left">向左对齐文本</p>text-center:居中对齐文本。
<p class="text-center">居中对齐文本</p>向右对齐文本。
<p class="text-right">向右对齐文本</p>text-justify:对齐文本，该段落会根据屏幕的大小对超出屏幕的字体进行换行。
<p class="text-justify">对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行</p>text-nowrap:该段落不会根据屏幕的大小对超出屏幕的字体尽显换行。
<p class="text-nowrap">该段落不会根据屏幕的大小对超出屏幕的文字进行换行。</p>text-lowercase:单词或者字母变成小写。
<p class="text-lowercase">BOOTSTROP</p>text-uppercase:单词或者字母变成大写。
<p class="text-uppercase">bootstrap</p>text-captalize:单词或者字母第一个（首）字母大写。
<p class="text-capitalize">bootstrap</p>3.缩略语
abbr:<abbr>元素的样式为显示在文本底部的一条虚线边框，当鼠标 悬停在上面时会显示完整的文本，（只要你为<abbr>title属性 添加了文本）。为了得到更小的一个字体的文本，请添加.initialism到<abbr>。
实例：
<abbr title="World Wide Web">WWW</abbr>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
4.地址
address:<address>默认为display:block;,需要使用标签<br/>来为封闭的地址文本添加换行。
实例：
<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>
5.引用
blockquote:默认样式引用，增加了左边线，设定了字体大小和内外边距。
<blockquote> Bootstrap 框架 </blockquote>
反向：blockquote-reverse
<blockquote class="blockquote-reverse "> Bootstrap 框架 </blockquote>
多种引用样式：
<blockquote>
<p>this is blockquote</p>
<footer class="text-right">by<cite title="Source Title">zichen</cite></footer>
</blockquote>6.列表
列表，可以分为：有序列表、无序列表、自定义列表。
.list-unstyled:移除默认的列表样式。
.list-unstyled {
padding-left: 0;
list-style: none;
}.list-inline:内联列表。
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}<ul class="list-inline">
<li>W3cplus</li>
<li>Blog</li>
<li>CSS3</li>
<li>jQuery</li>
<li>PHP</li>
</ul>.dl-horizontal:应用于<dl>元素和<dt>元素中 水平排列。
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}<dl class="dl-horizontal">
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>
<dt>seashen.cn</dt>
<dd>一个专业的HTML5网站</dd>
<dt>我来测试一个标题，我来测试一个标题</dt>
<dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
</dl>7.代码
.per-scrollable使<pre>元素可滚动scrollable。
内联代码：
<code><section></code>用户输入：
press <kbd>ctrl + ,</kbd>标记变量：
<var>y</var>=<var>m</var><var>x</var>+<var>b</var>程序输出：
<samp>This is program.</samp> 代码块：
<pre><article>Please input...</article></pre>作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/80337125
本文为Roger_CoderLife的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！
