Web前端 — Bootstrap（2）

Bootstrap本次知识点

1.标题

2.内联文本元素

3.缩略语

4.地址

5.引用

6.列表

7.代码

 

 

1.标题

从h1到h6

<h1>Bootstrap排版样式</h1>     //36px

<h2>Bootstrap排版样式</h2>     //30px

<h3>Bootstrap排版样式</h3>     //24px

<h4>Bootstrap排版样式</h4>     //18px

<h5>Bootstrap排版样式</h5>     //14px

<h6>Bootstrap排版样式</h6>     //12px

 

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>

text-right:向右对齐文本。

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