bootstrap之表格和按钮 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格、按钮</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<!-- 响应式表格：table-responsive -->
<body style="margin:50px;" class="table-responsive">


<!--基本表格样式-->
    <!-- <table class="table">-->

<!--条纹状表格-->
        <!--<table class="table table-striped"> -->

<!--带边框的表格-->
    <!-- <table class="table table-bordered"> -->

<!--悬停鼠标-->
    <table class="table table-hover">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>


        <!-- 状态类样式： -->
        <!-- 单独设置在每一行上 -->
        <!--
        active：鼠标悬停在行或单元格上
        success：标识成功或积极的动作
        info：标识普通的提示信息或动作
        warning：标识警告或需要用户注意
        danger：标识危险或潜在的带来负面影响的动作
        sr-only：隐藏行
        -->
        <tbody>
            <tr class="active">
                <td>1</td>
                <td>张1</td>
                <td>男</td>
                <td>54</td>
            </tr>
            <tr class="success">
                <td>2</td>
                <td>张2</td>
                <td>男</td>
                <td>53</td>
            </tr>
            <tr class="info">
                <td>3</td>
                <td>张3</td>
                <td>男</td>
                <td>52</td>
            </tr>
            <tr class="warning">
                <td>4</td>
                <td>张4</td>
                <td>男</td>
                <td>51</td>
            </tr>
            <tr class="danger">
                <td>5</td>
                <td>张5</td>
                <td>男</td>
                <td>50</td>
            </tr>
            <tr class="sr-only">
                <td>6</td>
                <td>张6</td>
                <td>男</td>
                <td>55</td>
            </tr>
        </tbody>
    </table>


<!-- 1.可作为按钮使用的标签或元素 -->
    <a href="#" class="btn">Link</a>
    <button class="btn btn-default">Button</button>
    <input type="button" class="btn btn-default" value="input">

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

<!-- 3.尺寸大小 -->
<!-- 从大到小尺寸 -->
    <!--
    btn-lg
    btn
    btn-sm
    btn-xs
    -->
    <button class="btn btn-danger btn-lg">Button</button>

<!-- 4.块状按钮    块及换行 -->
    <!-- btn-block -->
    <button class="btn btn-danger btn-block">Button</button>

<!-- 5.激活状态    激活按钮 -->
    <!-- active -->
    <button class="btn active">Button</button>

<!-- 5.禁用状态    禁用按钮 -->
    <!-- active disabled -->
    <button class="btn active disabled">Button</button>


    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

 

posted @ 2016-03-04 12:22  嘆世殘者——華帥  阅读(420)  评论(0)  编辑  收藏  举报