Bootstrap学习(二）text、code

字体

<div class="container" >
       <h1>宝可梦</h1>
        <h2>宝可梦</h2>
        <h3>宝可梦</h3>
        <h4>宝可梦<small>宝可梦</small></h4>
        <p>宝可梦宝可梦宝可梦宝可梦<del>宝可梦</del><mark>宝可梦</mark><strong>宝可梦</strong></p>
        <p class="lead">宝可梦宝可梦宝可梦宝可梦</p>

    </div>

此外还有：

.text-left、.text-right .text-center 居左居右居中

.text-lowercase .text-uppercase 大小写

.text-capitalize 首字母大写

标签定义文档作者/所有者的联系信息。

文本通常呈现为斜体。

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

文本强调色

    <p class="text-muted">这个是text-muted属性的强调色！</p> 
        <p class="text-primary">这个是text-primary属性的强调色！</p> 
        <p class="text-success">这个是text-success属性的强调色！</p> 
        <p class="text-info"> 这个是text-info属性的强调色！</p> 
        <p class="text-warning">这个是text-warning属性的强调色！</p> 
        <p class="text-danger">这个是text-danger属性的强调色！</p> 

标签用来表示一个缩写词或者首字母缩略词

The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.

容器containe

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

百分比显示：

<div class="container-fluid"
      <div class="row"><div class="box">container-fluid</div></div
    </div>

.row（将页面分成一列列容器）

 <div class="row">
            <div class="col-md-6">一共分成12列，占六列</div>
            <div class="col-md-4">一共分成12列，占四列</div>
        </div>

.col-md-offset-4 偏移四列

.col-md-push/pull 改变列的次序

<div class="col-md-4 col-md-offset-4">偏移</div>

        <div class="row">
            <div class="col-md-9 col-md-push-3">99999</div>
            <div class="col-md-3 col-md-pull-9">33333</div>
        </div>

Code

这个一般用在制作自己的博客里，书写相关代码（注：<为<号，>为>号）

 <div class="container" >
         例如我要写<code>&lt;代码格式&gt;</code>
         <kbd>命令格式</kbd>
         <pre>
             代码块格式
         </pre>
         变量文本<var>x</var>+<var>y</var>=6<br>
         <samp>短语标签，用来定义计算机程序的样本文本。</samp>
    </div>

css选择器

[class*="col-"]{
 padding-top:15px;

}

选择所有类名中含有"col-"的元素

[class^=“col-”] 选择所有类名中以"col-"开头的元素

[class$=“col-”] 选择所有类名中以"col-"结尾元素

参考资料：
1.https://www.jianshu.com/p/0dfee410327a
2.https://blog.csdn.net/xiaxue168/article/details/88777004
3.极客学院相关教程
4.https://www.cnblogs.com/ccsx/p/8706462.html