样式通过关键字class来指定不同的效果

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    7.     <style>
    9.     </style>
    10.     <link rel="stylesheet" href="dist/css/bootstrap.css">
    11. </head>
    12. <body>
    16. <div class="container">
    17.     <div class="row">
    18.         <div class="col-md-8 col-md-offset-2">
    19.             <table border="1" class="table table-striped table-hover table-bordered">
    20.                 <tr>
    21.                     <th>序号</th>
    22.                     <th>姓名</th>
    23.                     <th>年龄</th>
    24.                     <th>部门</th>
    25.                 </tr>
    27.                 <tr class="success">
    28.                     <td>1</td>
    29.                     <td>张三</td>
    30.                     <td>23</td>
    31.                     <td>销售</td>
    32.                 </tr>
    33.                 <tr>
    34.                     <td>2</td>
    35.                     <td>李四</td>
    36.                     <td>23</td>
    37.                     <td>销售</td>
    38.                 </tr>
    39.                 <tr class="danger">
    40.                     <td>3</td>
    41.                     <td>王五</td>
    42.                     <td>23</td>
    43.                     <td>销售</td>
    44.                 </tr>
    45.             </table>
    46.         </div>
    47.     </div>
    50.     <div class="row">
    51.         <div class="col-md-8 col-md-offset-2">
    54.             <form>
    55.                 <div class="form-group">
    56.                     <label for="exampleInputEmail1">Email address</label>
    57.                     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    58.                 </div>
    59.                 <div class="form-group">
    60.                     <label for="exampleInputPassword1">Password</label>
    61.                     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    62.                 </div>
    63.                 <div class="form-group">
    64.                     <label for="exampleInputFile">File input</label>
    65.                     <input type="file" id="exampleInputFile">
    66.                     <p class="help-block">Example block-level help text here.</p>
    67.                 </div>
    68.                 <div class="checkbox">
    69.                     <label>
    70.                         <input type="checkbox"> Check me out
    71.                     </label>
    72.                 </div>
    73.                 <button type="submit" class="btn btn-default">Submit</button>
    74.             </form>
    76.             <hr>
    79.             <form action="">
    80.                 <div class="form-group">
    82.                     <label for="user">用户名</label>
    83.                     <input type="text" class="form-control" id="user">
    84.                 </div>
    85.                 <div class="form-group">
    86.                     <label for="pwd">密码</label>
    87.                     <input type="password" class="form-control" id="pwd">
    88.                 </div>
    89.                 <div class="form-group">
    91.                     <div class="row">
    92.                         <div class="col-md-6">
    94.                             <select class="form-control">
    95.                                 <option>1</option>
    96.                                 <option>2</option>
    97.                                 <option>3</option>
    98.                                 <option>4</option>
    99.                                 <option>5</option>
    100.                             </select>
    101.                         </div>
    102.                     </div>
    103.                 </div>
    105.                 <div class="row">
    106.                     <div class="col-md-2 pull-right"><input type="submit" class="form-control"></div>
    107.                 </div>
    108.             </form>
    110.         </div>
    112.     </div>
    115.     <div class="col-md-8 col-md-offset-2">
    116.         <div class="row">
    117.             <h3>按钮</h3>
    118.             <button class="btn btn-danger btn-sm" disabled="disabled">button</button>
    119.             <input  class="btn btn-warning btn-lg" type="button" value="button">
    120.             <span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;&nbsp;
    121.             <span class="glyphicon glyphicon-shopping-cart"></span>
    122.         </div>
    123.     </div>
    124. </div>
    127. </body>
    128. </html>