Web前端 — Bootstrap（2）

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的原创文章，著作权归作者所有，转载请注明原文出处，欢迎转载！