bootstrap1相关学习文档

时间:2021-10-12 00:59:01

<em>Bootstrap 框架</em>                                                    //倾斜

4.对齐

//设置文本对齐

<p class="text-left">Bootstrap 框架</p>         //居左

<p class="text-center">Bootstrap 框架</p>    //居中

<p class="text-right">Bootstrap 框架</p>      //居右

<p class="text-nowrap">Bootstrap 框架</p>    //不换行

5.大小写

//设置英文文本大小写

<pclass="text-lowercase">Bootstrap 框架</p>//小写

<pclass="text-uppercase">Bootstrap 框架</p>//大写

<pclass="text-capitalize">Bootstrap 框架</p>//首字母大写

6.缩略语

//缩略语

Bootstrap<abbrtitle="Bootstrap" class="initialism">框架</abbr>

7.地址文本

//设置地址,去掉了倾斜,设置了行高,底部 20px <address>

<strong>Twitter, Inc.</strong><br> 795Folsom Ave, Suite 600<br>

SanFrancisco, CA 94107<br>

<abbrtitle="Phone">P:</abbr> (123) 456-7890 </address>

8.引用文本

//默认样式引用,增加了做边线,设定了字体大小和内外边距

<blockquote> Bootstrap 框架

</blockquote>

//反向

<blockquoteclass="blockquote-reverse "> Bootstrap 框架

</blockquote>

9.列表排版

//移出默认样式

<ul class="list-unstyled"><li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li><li>Bootstrap 框架</li> <li>Bootstrap 框架</li>

</ul>

//设置成内联

<ulclass="list-inline"> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li><li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li>

</ul>

//水平排列描述列表

<dlclass="dl-horizontal">

<dt>Bootstrap</dt>

<dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>

</dl>

10.代码

//内联代码

<code>&lt;section&gt;</code>

//用户输入

press<kbd>ctrl + ,</kbd>

//代码块

<pre>Pleaseinput... </pre>

Bootstrap 还列举了<var>表示标记变量,<samp>表示程序输出,只不过没有重新复

写 CSS。