今天完成的事情

任务八第一个页面添加样式

明天计划的事情

完善第一个页面，开始第二个人页面

遇到的问题

合作企业的图片没有和上面内容对齐

顶端和底端还没添加

css内容还是不熟悉

收获

1.bootstrap表格。

（1）标签<table>为表格添加基础样式。

        <thead>表格标题行的容器元素（<tr>），用来标识表格列。

        <tbody>表格主体中的表格行的容器元素（<tr>）。

        <tr>一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。

       <td>默认的表格单元格。

       <th>特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。

       <caption> 关于表格存储内容的描述或总结。

(2)表格的类 .table为任意 <table> 添加基本样式 (只有横向分隔线)

       .table-striped在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)，

       .table-bordered 为所有表格的单元格添加边框

       .table-hover在 <tbody> 内的任一行启用鼠标悬停状态，当指针悬停在行上时会出现浅灰色背景

       .table-condensed让表格更加紧凑

<div class="container">

     <table class="table table-striped table-bordered ">

         <thead>

           <tr>

            <th>#</th>

            <th>Firstname</th>

          </tr>

        </thead>

        <tbody>

        <tr>

            <td>1</td>

            <td>Anna</td>

        </tr>

        <tr>

            <td>2</td>

            <td>Debbie</td>

        </tr>

        <tr>

            <td>3</td>

            <td>John</td>

        </tr>

        </tbody>

    </table>

</div>

(3)<tr>, <th> 和 <td> 的类.active 将悬停的颜色应用在行或者单元格上

                                     .success 表示成功的操作

                                     .info 表示信息变化的操作

                                      .warning 表示一个警告的操作

                                      .danger 表示一个危险的操作，这几个类用在行上，颜色也会相应变化。允许改变表格行或单个单元格的背景颜色。，

(4)响应式表格通过把任意的 .table 包在 .table-responsive class 内

2.bootstrap表单。Bootstrap 提供了3种类型的表单布局：垂直表单（默认），内联表单，水平表单

(1)垂直或基本表单,基本的表单结构是 Bootstrap 自带的.

    向父 <form> 元素添加 role="form"。

    把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。

    向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

  <form role="form">

    <div class="form-group">

    <label for="name">标签</label>

    <input type="text" class="form-control" placeholder="文本输入">

  </div>

 </form>

(2)内联表单.如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，向 <form> 标签添加 class .form-inline。

(3)水平表单.水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单向父 <form> 元素添加 class .form-horizontal,把标签和控件放在一个带有 class .form-group 的 <div> 中,向标签添加 class .control-label。

<form class="form-horizontal" role="form">

    <div class="form-group">

        <label for="firstname" class="col-sm-2 control-label">名字</label>

        <div class="col-sm-10">

            <input type="text" class="form-control" id="firstname" placeholder="请输入名字">

        </div>

     </div>

</form>

当创建表单时，如果您想从列表中选择若干个选项时，请使用 checkbox。如果只能选择一个选项，请使用 radio。对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

3.bootstrap轮番拿来用了一下