2016年5月29日下午（传智Bootstrap（笔记二））

一、Bootstrap 排版

　　1、行内文本样式

　　　　　<b>、<strong>、<i>、<em>、<del>、

　　Bootstrap 提供了一些用于强调文本的类，如下面实例所示：

        <small>本行内容是在标签内</small><br>
        <strong>本行内容是在标签内</strong><br>
        <em>本行内容是在标签内,字体为斜体</em><br>
        <b>本行内容是在标签内</b><br>
        <i>本行内容是在标签内,字体为斜体</i><br>
        <del>本行内容是在标签内，有删除线</del><br>
        <s>本行内容是在标签内，有删除线</s>

　　　　　<s>注释：请使用 <del> 替代它！

　　　　　注释：根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 <b> 标签作为最后的选项。HTML5 规范声明：使用 <em> 标签来表示强调的文本，应该使用 <strong> 标签来表示重要文本，应该使用 <mark> 标签来表示标注的/突出显示的文本。

　　　　　<i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。

　　　　　　HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。

                 

　　2、文本对齐样式：.text-left、.text-center、.text-right、.text-justify（只有IE浏览器支持）

        <p class="text-left">向左对齐文本</p>
        <p class="text-center">居中对齐文本</p>
        <p class="text-right">向右对齐文本</p>

                              

　　3、列表样式：list-unstyled（无符号）、list-inline（行内块）

　　　　（1）、list-unstyled（无符号）：移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)

　　　　（2）、list-inline（行内块）：将所有列表项放置同一行

<body style="margin:200px;">
        <div class="container">
            <p>这个是list-unstyled的列表样式标签</p>
            <ul class="list-unstyled">
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>11111111111111
                    <ul >
                        <li>2222222222222222222</li>
                        <li>2222222222222222222</li>
                        <li>2222222222222222222</li>
                    </ul>
                </li>
                <li>11111111111111</li>
            </ul>
            ---------------------------------------我是分割线----------------------------------------------
            <p>这个是list-inline的列表样式标签</p>
            <ul class="list-inline">
                <li>11111111111111</li>
                <li>11111111111111</li>
                <li>22222222222222</li>
                <li>22222222222222</li>
                <li>23333333333333</li>
                <li>33333333333333</li>
            </ul>
        </div>
    </body>

　　效果图如下：

               

　　4、表格样式：

　　下表样式可用于表格中：

类描述 
.table 为任意 <table> 添加基本样式 (只有横向分隔线)  
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)  
.table-bordered 为所有表格的单元格添加边框  
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态  
.table-condensed 让表格更加紧凑  
联合使用所有表格类  

　　（1）.table：为 <table> 标签增加基本样式--很少的内补(padding)并只增加水平分隔线--只要为其增加 .table 类即可。

 <body style="padding:50px;background-color:#ccc">
        <div class="container" style="background-color:#fff;padding:50px;">
            <table class="table">
                <caption>基本的表格布局</caption>
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>城市</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Tanmay</td>
                            <td>Bangalore</td>
                        </tr>
                        <tr>
                            <td>Sachin</td>
                            <td>Mumbai</td>
                        </tr>
                    </tbody>
            </table>
        </div>
    </body>

                                       

　　（2）.table-striped：通过添加 .table-striped class，有条纹的背景色行（隔行变色），如下面的实例所示：

 <body style="padding:50px;background-color:#ccc">
        <div class="container" style="background-color:#fff;padding:50px;">
            <table class="table table-striped">
                <caption>条纹表格布局</caption>
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>城市</th>
                        <th>密码</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tanmay</td>
                        <td>Bangalore</td>
                        <td>560001</td>
                    </tr>
                    <tr>
                        <td>Sachin</td>
                        <td>Mumbai</td>
                        <td>400003</td>
                    </tr>
                    <tr>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>

                                         

　　（3）.table-bordered：带边框的表格，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：

<body style="padding:50px;background-color:#ccc">
        <div class="container" style="background-color:#fff;padding:50px;">
            <table class="table table-striped table-bordered">
                <caption>条纹表格布局</caption>
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>城市</th>
                        <th>密码</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tanmay</td>
                        <td>Bangalore</td>
                        <td>560001</td>
                    </tr>
                    <tr>
                        <td>Sachin</td>
                        <td>Mumbai</td>
                        <td>400003</td>
                    </tr>
                    <tr>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>

                                   

　　（4）.table-hover：当指针悬停在行上时会出现浅灰色背景，（放上变色，离开恢复）如下面的实例所示：

<body style="padding:50px;background-color:#ccc">
        <div class="container" style="background-color:#fff;padding:50px;">
            <table class="table table-bordered table-hover">
                <caption>条纹表格布局</caption>
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>城市</th>
                        <th>密码</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tanmay</td>
                        <td>Bangalore</td>
                        <td>560001</td>
                    </tr>
                    <tr>
                        <td>Sachin</td>
                        <td>Mumbai</td>
                        <td>400003</td>
                    </tr>
                    <tr>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>

　　　　　　　　　　　　　　

　　（4）.table-condensed：行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

<body style="padding:50px;background-color:#ccc">
        <div class="container" style="background-color:#fff;padding:50px;">
            <table class="table table-bordered table-hover table-condensed">
                <caption>条纹表格布局</caption>
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>城市</th>
                        <th>密码</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tanmay</td>
                        <td>Bangalore</td>
                        <td>560001</td>
                    </tr>
                    <tr>
                        <td>Sachin</td>
                        <td>Mumbai</td>
                        <td>400003</td>
                    </tr>
                    <tr>
                        <td>Uma</td>
                        <td>Pune</td>
                        <td>411027</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>

　　　　　　　　　　　　　　　　

　　5、行或单元格背景色（<tr>, <th> 和 <td> 类）

　　　　下表的类可用于表格的行或者单元格：

类描述 
.active 将悬停的颜色应用在行或者单元格上  
.success 表示成功的操作  
.info 表示信息变化的操作  
.warning 表示一个警告的操作  
.danger 表示一个危险的操作

　　（1）只能给<tr>或<td>来添加类样式；

<body style="padding:50px;background-color:#ccc">
        <div class="container" style="background-color:#fff;padding:20px;">
            <table class="table table-bordered table-hover table-condensed">
                <caption>上下文表格布局</caption>
                <thead>
                    <tr>
                        <th>产品</th>
                        <th>付款日期</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="active">
                        <td>产品1</td>
                        <td>23/11/2013</td>
                        <td>待发货</td>
                    </tr>
                    <tr class="success">
                        <td>产品2</td>
                        <td>10/11/2013</td>
                        <td>发货中</td>
                    </tr>
                    <tr class="info">
                        <td>产品3</td>
                        <td>10/11/2013</td>
                        <td>送货中</td>
                    </tr>
                    <tr  class="warning">
                        <td>产品3</td>
                        <td>20/10/2013</td>
                        <td>待确认</td>
                    </tr>
                    <tr  class="danger">
                        <td>产品4</td>
                        <td>20/10/2013</td>
                        <td>已退货</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>

　　　　　　　　　               

　　6、响应式表格（根据屏幕大小来变化）

　　　　通过把任意的 .table 包在 .table-responsive内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

<body style="padding:50px;background-color:#ccc">
        <div class="table-responsive">
            <table class="table" style="background-color:#fff">
                <caption>响应式表格布局</caption>
                    <thead>
                        <tr>
                            <th>产品</th>
                            <th>付款日期</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="active">
                            <td>产品1</td>
                            <td>23/11/2013</td>
                            <td>待发货</td>
                        </tr>
                        <tr class="info">
                            <td>产品2</td>
                            <td>10/11/2013</td>
                            <td>发货中</td>
                        </tr>
                        <tr class="warning">
                            <td>产品3</td>
                            <td>20/10/2013</td>
                            <td>待确认</td>
                        </tr>
                        <tr class="danger">
                            <td>产品4</td>
                            <td>20/10/2013</td>
                            <td>已退货</td>
                        </tr>
                    </tbody>
            </table>
        </div>
    </body>

　　　　　　　　　　　             　

　　当屏幕宽度小于768px时，表格会出现滚动条；

　　当屏幕宽度大于768px时，表格的滚动条自然消失。

<body style="padding:50px;background-color:#ccc">
        <div class="table-responsive">
            <table class="table" style="background-color:#fff">
                <tr class="danger">
                    <td>编号</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                </tr>
                <tr class="warning">
                    <td>编号</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                    <td>发布时间</td>
                </tr>
            </table>
        </div>
    </body>

     　　

二、Bootstrap 辅助类

　　1、文本

　　　　以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：

类描述 
.text-muted "text-muted" 类的文本样式  
.text-primary "text-primary" 类的文本样式  
.text-success "text-success" 类的文本样式  
.text-info "text-info" 类的文本样式  
.text-warning "text-warning" 类的文本样式  
.text-danger "text-danger" 类的文本样式   
        <p class="text-muted">本行内容是减弱的</p>
        <p class="text-primary">本行内容带有一个 primary class</p>
        <p class="text-success">本行内容带有一个 success class</p>
        <p class="text-info">本行内容带有一个 info class</p>
        <p class="text-warning">本行内容带有一个 warning class</p>
        <p class="text-danger">本行内容带有一个 danger class</p>

                                                                       

posted @ 2016-05-29 16:33  zzjeny  阅读(265)  评论(0)  编辑  收藏  举报