Bootstrap简单学习

一、Bootstrap简介

1.概念

​ 介绍:bootstrap是一个前端开发的框架,无需自己编写大量繁琐的css代码就可快速制作出非常美观的页 面,开发人员进行基于bootstrap二次开发即可。

​ 优点:

​ 1.定义了很多css样式表和js插件。

​ 2.响应式布局(会根据页面分辨率不同自动调整页面大小)。

2.快速入门

Bootstrap首页 Bootstrap下载

​ 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官网轮播图标签片段