一、Bootstrap简介
1.概念
介绍:bootstrap是一个前端开发的框架,无需自己编写大量繁琐的css代码就可快速制作出非常美观的页 面,开发人员进行基于bootstrap二次开发即可。
优点:
1.定义了很多css样式表和js插件。
2.响应式布局(会根据页面分辨率不同自动调整页面大小)。
2.快速入门
1.下载bootstrap
2.引入bootstrap到项目中(js css font )
3.搭配jquery使用
4.具体效果见项目
二、响应式布局
栅格系统的实现
1.定义容器。相当于table
容器分类:
1.container:两边留白
2.container-fluid:,每种页面都是100%的宽度
2.定义行,相当于tr。格式:row
3.定义元素,指定元素在不同设备上所占的格子数目。样式:col-设备代号-格子数目
4.设备代号:
超小屏幕 手机 (<768px) –xs
小屏幕 平板 (≥768px) –sm
中等屏幕 桌面显示器 (≥992px) –md
大屏幕 大桌面显示器 (≥1200px) –lg
5.注意:
1.一行中如果格子数目超过12,则超出部分自动换行。
2.栅格类属性可以向上兼容。
3.如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。
三、Css样式和Js插件
1.全局css样式
按钮:class=”btn btn-default”
图片 :class=”img-responsive” –图片百分百
img-circle –圆形
img-rounded –矩形
img-thumbnail –相框
表单 :详见bootstrap官网css全局样式标签片段
表格 :详见bootstrap官网css全局样式标签片段
2.组件
导航与分页 :详见bootstrap官网c组件标签片段
3.插件
轮播图 :详见bootstrap官网轮播图标签片段