一、今天完成的事情

1.学习了Bootstrap框架

1.1Boostrap是一个用于快速开发 Web 应用程序和网站的前端框架。开始使用时，需在head里添加以下代码：

<link rel="stylesheet" href="css/bootstrap.min.css" />  （ 引入css ）

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> （ 引入jquery ）

<script src="js/bootstrap.min.js"></script> （ 引入js ）

1.2学会使用网格系统布局，响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。以下为网格系统布局基本结构：

<div class="container">

   <div class="row">

      <div class="col-xs-4"></div>  ( xs为使用小于768px的网格系统样式，4为将12列分为3大列，每1大列里含有4小列 )

      <div class="col-xs-4"></div>      

   </div>

</div

1.3使用Bootstrap按钮

<!-- 标准的按钮 -->

<button type="button" class="btn btn-default">默认按钮</button>

<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->

<button type="button" class="btn btn-primary">原始按钮</button>

<!-- 表示一个成功的或积极的动作 -->

<button type="button" class="btn btn-success">成功按钮</button>

<!-- 信息警告消息的上下文按钮 -->

<button type="button" class="btn btn-info">信息按钮</button>

<!-- 表示应谨慎采取的动作 -->

<button type="button" class="btn btn-warning">警告按钮</button>

<!-- 表示一个危险的或潜在的负面动作 -->

<button type="button" class="btn btn-danger">危险按钮</button>

<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->

<button type="button" class="btn btn-link">链接按钮</button>

1.4下拉列表的基本结构

<div class="dropdown">

    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

        <li role="presentation">

            <a role="menuitem" tabindex="-1" href="#">Java</a>

        </li>

        <li role="presentation">

            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>

        </li>

    </ul>

</div>

2.学会使用CSS Sprite

CSS Sprites是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。

通过background-image插入合并图片

通过bakcground-position选择定位要使用的icon，使用方法为测量图片左侧和顶部到icon的距离

.icon1{background-position: -40px 0;}  （ -40px为将合并图往左移动40px，顶部不移动，此位置则会显示想要的icon ）

除了可以使用具体px，还可以使用%来定位。用百分比来设置属性值，是以自身容器的长宽 减去 图片的长宽 乘以 百分比 所得的数值来确定图片的起始位置。

（容器自身的宽度/高度 - 图片自身的宽度/高度） x 百分比 

二、明天计划的事情

明天计划继续学习Bootstrap来布局，学会使用各种基本样式和属性，学会更灵活地自定义其样式

三、遇到的问题

使用Bootstrap来使用下拉列表时，想去除菜单栏的三角标，替换成任务要求的图标，后通过查找下拉列表各属性的意义，找到caret为三角标，去除该class则可以去除三角。

四、收获

今天学习了Bootsrap框架的安装和使用，学会了网格布局，下拉列表和按钮的使用与自定义样式。

学习了css雪碧图的使用。