Boostrap前端开发框架

      

 

装修公司可以帮我们快速完成装修（装修公司类似框架）

 

1. Bootstrap简介

Bootstrap 来自Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML，css，JavaScript的，它简洁灵活，使得web开发更加快速。

中文官网：Bootstrap中文网

官网：Bootstrap · The most popular HTML, CSS, and JS library in the world.

框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制的样式库，组件和插件。使用者要按照框架所规定的某种规范进行开发。

优点

• 标准的html+css编码规范
• 提供了一套简洁、直观、强悍的组件
• 有自己的生态圈，不断的更新迭代
• 让开发更简单，提高了开发的效率

1. 版本

1. 2.X.X：停止维护，兼容性好，代码不够简洁，功能不够完善
2. 3.x.x：稳定，但是放弃了IE6-IE7。对IE8支持但界面效果不好。
3. 4.X.X：目前使用最多，稳定，偏向于开始响应式布局、移动设备优先的WEB项目
4. 5.X.X：最新版，目前还不是很流行

1. Bootstrap 使用

Bootstrap 使用四步：

     1.创建文件夹结构

 

​​​​​​​     2.创建html骨架结构

 

3.引入相关样式文件

 

4.书写内容

• 直接拿Bootstrap 预先定义好的样式来使用
• 修改Bootstrap 原来的样式，注意权重问题
• 学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果。

1. 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container容器，Bootstrap 预先定义好了这个类，叫.container，它提供了两个作此用处的类。

1.container类

• 响应式布局的容器 固定宽度

2.container-fluid类

• 流式布局容器 百分百宽度
• 占据全部视口的容器
• 适用于单独做移动端开发

1. Bootstrap 栅格系统

栅格系统英文为：“grid systems”，也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。

Bootstrap 里面container宽度是固定的，但是在不同的屏幕下，container的宽度不同，我们再把container划分为12等份。