Bootstrap(3) 表格与按钮

1、表格

基本格式，实现基本的表格样式

          <table class="table">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>50</td>
            </tr>
            <tr >
                <td>2</td>
                <td>李四</td>
                <td>女</td>
                <td>48</td>
            </tr>
            <tr >
                <td>3</td>
                <td>王五</td>
                <td>男</td>
                <td>52</td>
            </tr>
            <tr>
                <td>4</td>
                <td>马六</td>
                <td>男</td>
                <td>55</td>
            </tr>
        </tbody>
    </table>

条纹状表格，让<tbody>里的行产生一行隔一行加单色背景效果

<table class="table table-striped">

带边框的表格，给表格增加边框

<table class="table table-bordered">

悬停鼠标，让<tbody>下的表格悬停鼠标实现背景效果

<table class="table table-hover">

状态类，可以单独设置每一行的背景样式

<tr class="success">
<tr class="active ">
<tr class="info ">
<tr class="warning ">
<tr class="danger ">

一共五种不同的样式可供选择。样式说明

active 鼠标悬停在行或单元格上

success 标识成功或积极的动作

info 标识普通的提示信息或动作

warning 标识警告或需要用户注意

danger 表示危险或潜在的带来负面影响的动作

隐藏某一行

             <tr class="sr-only">
                <td>4</td>
                <td>马六</td>
                <td>男</td>
                <td>55</td>
            </tr>

2、按钮

可作为按钮使用的标签或元素。转化成普通按钮

          <a href="###" class="btn btn-default">Link</a>
    <button class="btn btn-default">Button</button>
    <input type="button" class="btn btn-default" value="input">

注意事项有三点：

(1).针对组件的注意事项

虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持<button> 元素。

(2).链接被作为按钮使用时的注意事项

如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role="button" 属性。

(3).跨浏览器展现

我们总结的最佳实践是：用 强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果

 

.预定义样式

        <button class="btn btn-info">一般信息</button>
    <button class="btn btn-default">默认样式</button>
    <button class="btn btn-success">成功样式</button>
    <button class="btn btn-warning">警告样式</button>
    <button class="btn btn-danger ">危险样式</button>
    <button class="btn btn-primary">首选项样式</button>
    <button class="btn btn-link">链接样式</button>

尺寸大小。从大到小的尺寸

<button class="btn btn-lg">Button</button>
<button class="btn">Button</button>
<button class="btn btn-sm">Button</button>
<button class="btn btn-xs">Button</button>

.块级按钮，块级换行

    <button class="btn btn-block">Button</button>
        <button class="btn btn-block">Button</button>

激活和禁用状态

         <button class="btn active">Button</button>
    <button class="btn active disabled">Button</button>