bootstrap

bootstrap的介绍

关于bootsrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

bootstrap解决什么问题

• 全局的css样式

• 基于媒体查询的响应式布局

• 栅格布局

• html组件

• js插件

  总结： bootstrap提供了从页面组件实现， 到css样式， 页面元素布局， 到响应式和页面交互的前端开发全套解决方案，非常重要

bootstrap的使用思路

• 在以前的学习中， 我们写一个页面， 不管是css，还是html，我们的第一反应是自己去写

• 但是使用bootstrap，我们的第一反应是， 找到bootstrap提拱的现成的css样式， 组件， 插件，直接使用， 然后，如果不符合需求， 再微调或修改。 除非bootstrap没有提供类似的功能，我们才需要自己去写

bootstrap的使用

• 导入jquery

• 导入bootstrap的js

• 导入boostrap的css

• 添加viewport

bootstarp全局css样式

1. 容器

   • Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。

   • 注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

     • .container 类用于固定宽度并支持响应式布局的容器。

     • .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

2. 文本样式

   • 对齐

   • 改变大小写

3. 表格（参考文档）

   • .active（灰）

   • .success（绿）

   • .info （蓝）

   • .warning（黄）

   • .danger （红）

4. 表单（参考文档）

   • 上下（每个字段label在上， input在下）

   • 内联（可能需要自己设置每个input的宽度）

5. 按钮（参考文档）

   • 可设置按钮的颜色，大小， 状态

6. 图片相关类名

   
   

7. 辅助类

   • 情境文本颜色

   • 情境背景色

8. 浮动， 清除浮动， 居中, 显示或隐藏

   • 左浮动: pull-left

   • 右浮动: pull-right

   • 清除浮动: 通过为父元素添加 .clearfix 类可以很容易地清除浮动

   • 居中: center-block

   • 显示: show

   • 隐藏: hidden

bootstrap栅格和响应式布局

栅格

1. 布局容器

   • Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或 .container-fluid 容器

     • .container 类用于固定宽度并支持响应式布局的容器。

     • .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

     • 由于 padding 等属性的原因，这两种容器类不能互相嵌套。

2. 行和列

   • 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局

   • 也就是 .container>.row>(.column1+.column2+.column3....) 的结构

   • 通过给每个元素设置 padding 属性，从而创建列与列之间的间隔

   • 通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding

   • 栅格系统中把大盒子自动分成12份，给子元素添加一个类， 指定其占到父盒子的空间多少份， 例如，三个等宽的列可以使用三个 .col-xs-4 来创建

   • 如果一行的元素超过了12份， 则会自动换行显示

3. 屏幕尺寸

   • .col-xs- ： 超小屏幕 手机 (<750px)

   • .col-sm- ： 小屏幕 平板 (≥750px) 

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

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

   • 所有的列， padding都是15px

4. 切分规则

   • 
     

5. 列偏移

   • 使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

   • 
     

6. 栅格和弹性布局的对比

   • 弹性布局不能根据屏幕尺寸来设置显示多少个

   • 栅格在不同的屏幕尺寸上，可以设置显示不同个， 只需要设定不同的宽度即可

元素的显示和隐藏

bootstrap常用组件

1. 下拉菜单

2. 按钮组

3. 按钮式下拉菜单

4. 输入框组

5. 导航

6. 分布

7. 标签

8. 微章

9. 巨幕

10. 警告框

11. 进度条

12. 媒体对象

13. 列表组

14. 面板

bootstrap常用插件

1. 模态框 （弹出框）

2. 滚动监听 （滚动监听导航条）

3. 标签页 （标签页面切换）

4. collapse （折叠面板）

5. carousel（轮播图）

6. affix（固定导航）