任务进展

1. 任务进度：10%；

2. 今日情况：

① 再次快速看了一遍bootstrap的基础（https://www.imooc.com/learn/141），但应用起来还是很懵，感觉像是html的标签默认样式的延申，主要方便在于JS插件的引用，可以更方便地通过声明类来实现交互动作；

② 然而在html文件的应用上，还是需要自定义样式（https://v3.bootcss.com/customize/），再下载下来应用，争取做到减少index.css的css代码，多用bootstrap的样式，通过类声明来规范html文件；

3. 任务问题：

① 不清楚如何实现多个html文件的页面整合为一个html文件，通过点击按钮实现html文件的切换，如同任务6的弹出页，可能需要iframe的封装吧；

② 学习如何自定义bootstrap的样式，来应用在不同风格的页面上，尤其在布局上实现与rem结合、自适应宽度等；

4. 明天任务：

① 自定义bootstrap的默认样式，减少index.css的代码应用；

② 完成三个页面的样式，尝试如何只需转为一个服务器地址表现三个页面的跳转(应该有吧）；

bootstrap的基础补充

一、全局样式

1. 1. 排版

① 标题（h1~h6/.h1~.h6），还有副标题（small标签，作为内联元素，可以插在h1等之间），其中h1为36px，h2为30px，h3为24px，h4为18px，h5为14px，h6为12px；除了在html文件中标签引用，还可以类引用，效果一样；

② 文本：默认为14px，行高为20px，底部外边距为10px，颜色为#333；

2. 2. 对齐：
2. ① .text-left：左对齐
2.        .text-center：居中对齐
2.        .text-right ：右对齐
2.        .text-justify：两端对齐
2. ② .text-uppercase：大写
2.      .text-lowercase：小写
2.      .text-capitalize： 首字母大写
   

3. 3. 文本样式：cite标签为将字体改为normal，mark标签为突出，del标签为删除线，ins标签和u标签为下划线，small标签为缩小字体，i和em标签为斜体，b和strong标签为强调，.lead的类名也是突出强调；

.text-muted：提示，使用浅灰色（#999）

.text-primary：主要，使用蓝色（#428bca）

.text-success：成功，使用浅绿色(#3c763d)

.text-info：通知信息，使用浅蓝色（#31708f）

.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

4. 4. 表格：简单样式为.table，都是用类名应用，可以空格分隔来应用多个类，同样也可以声明其他类来使表格变色，如.danger为红色，.active为悬停变色，.success为绿色，.info为淡蓝色，.waring为黄色，以下类型可以组合应用，但必须先声明.table，后应用以下类型；

.table-bordered：带边框的表格

.table-striped：条纹状的表格

.table-hover：悬停变色的表格

.table-condensed：紧凑的表格

table-responsive：响应式表格，会出现滚动条

5. 5. 列表：无序列表ul~li，有序列表ol~li，定义列表dl~dt、dd，都可以列表嵌套

.list-unstyled：可以去除默认的列表样式的风格

.list-inline：把ul或ol垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示，变为水平导航

.dl-horizontal：可以使dl在大于768px的屏幕时，具有水平定义列表效果，小于时变为垂直；

6. 6. 代码：

<code>：一般是针对于单个单词或单个句子的代码；

<pre>：一般是针对于多行代码（也就是成块的代码），里面空格几个就显示几个；

 .pre-scrollable：控制代码块区域最大高度为340px，超出这个高度会在Y轴出现滚动条；

<kbd>:一般是表示用户要通过键盘输入的内容，变为黑色圆角矩形作为背景；

无论哪个标签代码，小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代

7. 7. 表单：建立在form标签里面，同样通过类名应用，也可以空格分隔来使用多个类名

① .form-group可以作为输入框组件（自带margin间距）；

 .form-horizontal，声明在form标签，使form-group表单组件内水平排列；

.form-inline，声明在form标签，可以把块状元素变为内联元素；

.form-lg或.form-sm可以使输入框变大或变小；

.sr-only可以把label的文本消失，.control-label把label变为可应用组件样式的文本；

② input必须声明type，输入框样式才生效；

.form-control给输入框可以应用样式，自带点击发光效果；

③ select~option组合为单行下拉选择框，添加multiple在select标签，可以变为多行选择框；

④ textarea，添加“.form-control”类名，则无需设置cols属性，已默认宽度为100%，再设置rows行数即可；

⑤ checkbox、radio，复选和单选框，通过放在label标签内，实现对齐，checkbox连同label标签放置在一个名为“.checkbox”的容器内，radio连同label标签放置在一个名为“.radio”的容器内，即

div(.checkbox )> label > input(type="checkbox") > 文本

如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”，如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

        ⑥ 按钮：input[type="submit"]或button标签、a标签可以变为按钮，建议使用button或a标签来制作按钮

.btn变为圆角按钮，以下的类型都要先声明.btn后应用；

.btn-default变为白色圆角按钮，且带悬停变色，为默认按钮；

.btn-success可以使按钮变为绿色，primary为深蓝色，info为淡蓝色，danger为红色，warning为黄色；

.btn-link为蓝色连接文本；

.btn-lg或.btn-sm使按钮变大或变小，.btn-xs为超小型，适用于表单中的input，textarea和select控件；

     通过设置控件的height，line-height，padding和font-size等属性来实现控件的高度设置；

.btn-block可以变为块状元素；

.active把悬停状态变为点击状态，.disabled变为禁用状态，如果legend中有输入框的话，这个输入框是无法被禁用的，

    .disabled类名不会禁止按钮的默认行为，比如说提交和重置行为等，在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为；

.form-control可以应用获取焦点的状态

⑦ 表单的验证状态：在.form-group的div中应用，.has-success可以把组件里的样式变为绿色，.has-warning为黄色，.has-error为红色，添加类名“has-feedback”，可以显示相应的icon作为符号；

给span标签添加"help-block"类名，将提示信息以块状显示，并且显示在控件底部，或者以网格系统来显示在控件后面；

8. 8. 图片：应用以下类名，需要通过其他的方式来处理图片大小，比如说控制图片容器大小

.img-rounded：圆角效果；

.img-circle：变为圆形；

.img-thumbnail：变为带有边框的圆角图形，缩略图片，配合网格系统实现，再添加一个div同级元素，声明为caption，可以添加说明内容p标签，标题h3标签、按钮btn标签；

img-responsive：响应式图片，主要针对于响应式设计

9. 9. 字体图标：即把图片以字体的形式引用，可以通过@fontface引用iconfont，或者在iconfont网站上引用，如需引用默认的bootstrap的字体图标，直接连接bootstrap的css即可

① 打开iconfont引用的字体图，选择需要引用icon下的字体名字，作为类名即可引用；

② 如需改变icon的样式，选择icon的类名（即最后一个空格的名），在另外的css声明其他样式即可，如改变字体一样；

如：<span class="glyphicon glyphicon-search"></span>

③ glyphicon的查看地址（http://w3c.3306.biz/bootstrap/eg/bootstrap--glyphicons-list.html）

三、渐进和响应式布局

1. 1. 网格系统：
2. 

① 一般平分为12份，或者可以修改为24份等；

② 可以在类声明里，增加相应的类前缀即表示样式在哪个分辨率范围内生效，如.col-xs-12，即在768px下，元素占比为全屏的12/12，即100%，如.col-sm-3，则是在平板的分辨率，元素占比为全屏的3/12，所以可以声明所占的列数（最大列数为12）；

③每个.col-xs-的占比在row类名的div里，即先声明row的div，再在里面声明各个元素的占比，但总数相加不能超过12；

④ 也可以增加offset来实现偏移，如.col-offset-xs-3，即从左往右偏移3个列数，要保证列与偏移列的总数不超过12；

⑤ 通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)，实现向右偏移或向左偏移，可以完成交换位置；

⑥ 每个row类名的列都可以嵌套，嵌套的列总数也需要遵循不超过12列，如在col-xs-9的子元素也是平分为12份，再添加col-xs-3，其宽度为75%×25%；

5. 单位：rem用作html声明，声明为0.625可以使em变为10px，为能兼容部分ie，可以先写rem再写px来适应；

四、组件

1. 1. 怪异的属性（多为给障碍人士设置）：

① role：给盲文浏览器识别的，作为语义化的标签；

② aria-label：配合读屏软件，识别输入框获取焦点时的内容；

③ tablndex：给tab键安排焦点转移的顺序；

④ data-：给页面数据增加data-，使数据不会显示在页面，方便在暗下进行传递，也方便组件交互；

2. 2. 下拉菜单：.dropdown表示下拉菜单，而.dropdown-menu-right为右对齐；

①  写在dropdown类名的div里面，增加button并添加按钮样式，dropdown-toggle为下拉按钮的小三角图标，data-toggle=“dropdown”，即绑定选项信息在按钮上；

② 下拉菜单的选项信息为ul、li组合，在dropdown-menu的类名ul下增加li选项，作为下拉菜单的选项；

③  添加一个空的<li>，并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能；

④ 同样添加一个空的li，可以添加类名class="dropdown-header"，来做每个组的头部；

⑤ 右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名；

⑥ 除了自带的悬停和点击状态，还有当前状态（.active）和禁用状态（.disabled）要另外声明；

3. 3. 控件组：.input-group表示控件组，.input-group-addon可以放置额外的内容与图标；
   

4. 4. 按钮组：.btn-group表示按钮组，可以里面放置多个按钮（声明.btn），并且实现整体圆角矩形；

① 将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中，实现相隔5px的工具栏；

② 通过btn-lg、btn-sm和btn-xs三个类名来调整padding、font-size、line-height和border-radius属性值来改变按钮大小；

③ 只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级，就可以实现dropdown按钮与其他按钮为一组；

④ 把水平分组的“btn-group”类名换成“btn-group-vertical”即可实现垂直按钮组；

⑤ 在按钮组“btn-group”上追加一个“btn-group-justified”类名，就可以等分分布，制作等分按钮组时，请尽量使用<a>标签元素来制作按钮；

⑥ 下拉菜单外部容器“div.dropdown”换成了“div.btn-group”，就可以实现按钮下拉菜单；

⑦ 通过在<button>标签中添加一个“<span>”标签元素，并且声明类为“caret”，可以实现下拉小三角；需要在“.btn-group”类上追加“dropup”类名，实现上弹小三角；

5. 5. 导航：.nav为无序列表的导航，即写在ul~li的组合，当前状态（.active）和禁用状态（.disabled）要另外声明，以下也是必须先声明.nav再应用；

.nav-tabs为可切换的导航

.nav-pills为胶囊导航

.nav-justified自适应水平导航，需要和“nav-tabs”或者“nav-pills”配合在一起使用，占满宽度；

.nav-stacked为垂直导航，在导航项之间添加“<li class=”nav-divider”></li>”，可以实现分割线；

① 只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul(class="dropdown-menu")；

② 面包屑导航：为ol加入breadcrumb类名，实现告诉用户现在所处页面的位置（当前位置），即导肮路径；

6. 6. 导航条：在导航外面添加父元素div，并声明为“navbar”，“navbar-default”来控制颜色；

① 通过增加一个div子元素，声明为“navbar-header”，其子元素再声明为“navbar-brand”来实现；

② 在navbar容器中放置一个带有navbar-form类名的表单，实现搜索栏；

<form action="##" class="navbar-form navbar-left" rol="search">

               <div>

                      <input type="text" placeholder="请输入关键词" />

               </div>

        <button type="submit" class="btn btn-default">搜索</button>

     </form>

③ 导航条提供的样式：导航条中的按钮navbar-btn，导航条中的文本navbar-text，导航条中的普通链接navbar-link；

④ .navbar-fixed-top：导航条固定在浏览器窗口顶部，.navbar-fixed-bottom：导航条固定在浏览器窗口底部；

⑤ 避免固定导航条遮盖内容：

body {

  padding-top: 70px;/*有顶部固定导航条时设置*/

  padding-bottom: 70px;/*有底部固定导航条时设置*/

}

⑥ 响应式导航条，即在不同宽度屏时，部分导航会隐藏；

  a.保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id  名；

  b.保证在窄屏时要显示的图标样式（固定写法），btn嵌套；

  c.并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定；

⑦ 反色导航条：将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本变为暗色；

7. 7. 分页：.pagination在父元素中添加分页声明，如页数排列，写在ul~li组合，使用的是ul>li>a这样的结构，且必须最后有a标签才生效；

① 通过“pagination-lg”让分页导航变大；通过“pagination-sm”让分页导航变小

② 翻页：.pager放置在翻页区域，即写出向左翻页或向右翻页，同样也是写在ul上，再连接网站链接；

🌂.previous把链接左对齐，.next把链接右对齐，添加在li标签上；

④ 在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，但同样不能禁止其点击功能，将a标签换成span标签来实现；

8. 8. 标签：.label表示标签，可以通过.label-default等来改变颜色

如：<span class="label label-default">New</span>

① 徽章：像标签一样，使用span标签来制作，并添加badge类名，则如提示数字一样；

9. 9. 进度条：.progress表示进度条，追加.progress-bar-striped使进度条颜色变为条纹

① 在子元素的div，添加class="progress-bar" style="width:60%;"则表示进度条位置在60%处，还可以写文本，来放在进度条内；

② 如需改变颜色，在class里增加progress-bar-状态，即可改为相应的状态色，如progress-bar-info/success/warming/danger；

③ 对于残障人员：

    追加role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"

④ 动态条纹进度条：在进度条“progress progress-striped”两个类的基础上再加入“active”类名；

⑤ 层叠进度条：多个同级子元素声明为class="progress-bar" style="width:60%;"，且相加不能超过100%；

⑥ 给进度条添加数值，只需要在子元素的div间写上数值文本即可；

10. 10. 面板：多为弹窗或提示信息，.panel表示面板，写在div的嵌套；

① .panel-heading为面板的头部；

② .panel-body为面板的主体内容；

③ .panel-footer为面板的注脚；

④ .panel-default为默认的主题颜色，追加.panel-状态可以写在最外面的panel的div里，来改变头部的颜色，如primary/info/success/warming/danger；

⑤ 把面板理解为一个区域，在使用面板的时候，都会在panel-body放置需要的内容，可能是图片、表格（table）或者列表（list-group）等，如是与panel-body同级，则左右无间距；

11. 11. 媒体对象：媒体对象即图文结合的内容区，一般是成组出现，包括

媒体对像的容器：常使用“media”类名表示

媒体对像的对象：常使用“media-object”表示

媒体对象的主体：常使用“media-body”表示

媒体对象的标题：常使用“media-heading”表示

① 使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式；

② 媒体对象的嵌套：只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”；

🌂媒体对象的列表：在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，而在li上使用“media”

12. 12. 列表组：.list-group代表列表组，写在ul、li里面，li即详细列表为.list-group-item；

① .badge代表数字的样式，如<span>13</span>

② .active为选中状态，disabled为禁用状态，也可以写其他状态；

③ 改变颜色，也是可以写为.list-group-item-状态，如info/success/warming/danger；

④ 如想给li添加链接，一种是在li的子元素为a标签，另一种是ul替换为div，li替换为a；

⑤ list-group-item-heading：用来定义列表项头部样式，list-group-item-text：用来定义列表项主要内容，添加在li或a的子元素；