快速开发
装修公司可以帮我们快速完成装修(装修公司类似框架)
- Bootstrap简介
Bootstrap 来自Twitter(推特),是目前最受欢迎的前端框架。Bootstrap 是基于HTML,css,JavaScript的,它简洁灵活,使得web开发更加快速。
中文官网:Bootstrap中文网
官网:Bootstrap · The most popular HTML, CSS, and JS library in the world.
框架:顾名思义就是一套架构,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制的样式库,组件和插件。使用者要按照框架所规定的某种规范进行开发。
优点
- 标准的html+css编码规范
- 提供了一套简洁、直观、强悍的组件
- 有自己的生态圈,不断的更新迭代
- 让开发更简单,提高了开发的效率
- 版本
- 2.X.X:停止维护,兼容性好,代码不够简洁,功能不够完善
- 3.x.x:稳定,但是放弃了IE6-IE7。对IE8支持但界面效果不好。
- 4.X.X:目前使用最多,稳定,偏向于开始响应式布局、移动设备优先的WEB项目
- 5.X.X:最新版,目前还不是很流行
- Bootstrap 使用
Bootstrap 使用四步:
-
- 创建文件夹结构
-
- 创建html骨架结构
3.引入相关样式文件
4.书写内容
- 直接拿Bootstrap 预先定义好的样式来使用
- 修改Bootstrap 原来的样式,注意权重问题
- 学好Bootstrap 的关键在于知道它定义了哪些样式,以及这些样式能实现什么样的效果。
- 布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个.container容器,Bootstrap 预先定义好了这个类,叫.container,它提供了两个作此用处的类。
1.container类
- 响应式布局的容器 固定宽度
2.container-fluid类
- 流式布局容器 百分百宽度
- 占据全部视口的容器
- 适用于单独做移动端开发
- Bootstrap 栅格系统
栅格系统英文为:“grid systems”,也有人翻译为“网格系统”,它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口尺寸的增加,系统会自动分为最多12列。
Bootstrap 里面container宽度是固定的,但是在不同的屏幕下,container的宽度不同,我们再把container划分为12等份。