前端笔记---1

1.bootstrap表格样式：

①代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>

<body>
<!--table-bordered table-hover table-striped-->
<table  class="table ">
  <thead>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td>雪飞</td>
      <td>16</td>
    </tr>
    <tr>
      <td>得港</td>
      <td>19</td>
    </tr>
    <tr>
      <td>大壮</td>
      <td>48</td>
    </tr>
  </tbody>
</table>

</body>
</html>

②显示结果图如下

③常用属性

<table  class="table table-bordered table-hover table-striped">
    
table：表格
table-bordered：加边框
table-hover：选中某行背景颜色加灰 
table-striped：隔行加灰

④用cdn引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

2.布局容器：

①两边留白

<style>
    .cc{
      background-color: red;
      height: 200px;
    }
  </style>


<div class="container cc">
</div>

②布满全屏

<style>
    .cc{
      background-color: red;
      height: 200px;
    }
  </style>


<div class="container-fluid cc">
 </div>

3.栅格系统：

<div class="col-xs-2 c2">
自动适应屏幕：col-xs-x

<div class="col-md-2 c2 col-md-offset-5">
右偏移：col-md-offset-x

4.排版：

①引用bootstrap后标签会变的稍微好看些，副标题标签也会好看些

标签