Bootstrap学习笔记

官网地址：http://getbootstrap.com

中文地址：www.bootcss.com

一、Bootstrap排版---标题：

标题（h1~h6/.h1~h6）

像素：h1:36px,h2:30px,h3:24px,h4:18px,h5:14px,h6:12px;

副标题：用<small>小标题</small> 例：<h1>标题一<small>小标题</small></h1>

 

二、文本

<p>
<mark>撒开了</mark><del>解答大家</del><ins>啊九点老家</ins><u>啊九点老家啊</u>李金的爱神的<small>李金的爱神的</small>箭拉受打击了奥斯卡到家啦桑德拉删掉了啊实打实大师大法师打发点阿打算
</p>

特殊背景用<mark></mark>，文字中间一横用<del></del>;

<ins></ins>和<u></u>文本下划线；

<small>李金的爱神的</small>字体变小；

<strong>了奥斯卡到家</strong>字体加粗；

位置排版;

<p class="text-left">
沙飞左对齐
</p>
<p class="text-center">
沙飞居中对齐
</p>
<p class="text-right">
沙飞右对齐
</p>

<p class="text-lowercase">
HELlO大写转换小写
</p>

<p class="text-uppercase">
hello小写转大写
</p>

<p class="text-capitalize">
hello首字母大写
</p>

三、表格

<%--table-striped:斑马线；table-bordered边框,table-hover鼠标变色效果--%>
    <table class="table table-striped table-bordered table-hover">
        <thead>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
        </thead>
        <tbody>
            <tr>
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
            </tr>
            <tr>
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
            </tr>
            <tr class="active">
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
            </tr>
            <tr class="success">
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
            </tr>
            <tr class="waring">
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
            </tr>
            <tr class="info">
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
            </tr>
            <tr class="danger">
                <td>内容一</td>
                <td>内容二</td>
                <td>内容三</td>
            </tr>
        </tbody>

    </table>