本人小白一枚,欢迎大家一起讨论学习,如有错误,还望大家指教。
简述:
概念: Bootstrap是一个前端开发框架,来自Twitter,是目前很收欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript。它简洁灵活,使得Web开发更加快捷。
好处:
- 定义了很多的css样式和js插件,我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
- 响应式布局:对于同一套页面可以兼容不同分辨率的设备。
响应式布局
- 同一套页面可以兼容不同分辨率的设备。
- 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子。
- 步骤:
- 定义容器。相当于之前的table,容器分为两种
container:
两边留白。container-fluid:
每一种设备都是100%宽度。
- 定义容器。相当于之前的table,容器分为两种
- 定义行:相当于之前的tr,样式:row。
- 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目。下面我们了解下设备代号
- xs:超小屏幕 手机(<768px)。
- sm:小屏幕 平板(>=768px)。
- md:中等屏幕 桌面显示器(>= 992px)。
- lg:大屏幕 大桌面显示器(>=1200px)。
注意:如果一行中的格子数目超过了12,超出的部分会自动换行。栅格类属性可以向上兼容,栅格类适用于与屏幕宽度大于或等于分界点大小的设备。如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。