今天完成的事情~

1.页面1完成了大概一半，学会了使用bootstrap制作轮播图和初步了解了栅格布局

今天的收获

1.bootstrap轮播插件

内容可以是图像，视频，内嵌框架等任何你想要放置的内容

使用规则：

给div添加myCarousel

<div id="myCarousel" "carousel slide">

   <!-- 轮播（Carousel）指标 -->

   <ol "carousel-indicators">

       <li data-target="#myCarousel" data-slide-to="0" "active"><P>

       <li data-target="#myCarousel" data-slide-to="1"><P>

       <li data-target="#myCarousel" data-slide-to="2"><P>

   </ol>

   <!-- 轮播（Carousel）项目 -->

   <div "carousel-inner">

       <div "item active">

           <img src="img/cm.jpg" alt="First slide">

       </div>

       <div "item">

           <img src="img/cm.jpg" alt="Second slide">

       </div>

       <div "item">

           <img src="img/cm.jpg" alt="Third slide">

       </div>

   </div>

   <!-- 轮播（Carousel）导航 -->

   <a "carousel-control left" href="#myCarousel"

      data-slide="prev"><span>&lsaquo;</span></a>

   <a "carousel-control right" href="#myCarousel"

      data-slide="next"><span>&rsaquo;</span></a>

</div>

2.栅格布局

bootstrap内置的一套响应式，移动设备优先的栅格系统，随着屏幕设备或视口尺寸的增加，系统最多分为12列，他是通过一系列的行row 与列column的组合创建页面布局，然后内容可以放入创建好的布局当中。

使用规则:

行row必须包含在容器container中，一边为其赋予合适的对齐方式和padding

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

使用container-fluid可以使container占据100%宽度

行row中可以添加列column，但列不可以超过平分的总列数，如

<div class="container"> <div class="row"> <div class="col-md-4"></div> <div

他们之间的关系container>row>column

col需要占多少列宽度时，用col-xx-xx表示，比如col-xs-2，表示在超小屏幕下占据2个列宽度

.col-xs-* ：超小屏幕、手机 (<768px)

.col-sm-* ：小屏幕 平板 (≥768px)

.col-md-* ：中等屏幕 桌面显示器 (≥992px)

.col-lg-* ：大屏幕 大桌面显示器 (≥1200px)

同时使用多个col-xx 组合拳可以达到不同宽度下的自适应

今天遇到的问题

1.bootstrap使用不够灵活，想调整效果比较困难~源码又都不太懂。。。

明天的计划

完成页面1+使用div制作出职业介绍页面的表格