Bootstrap

（一）简介和使用

1．简介

是一个很牛的框架,只要有一点HTML css JS的基础就能做很漂亮的页面,页面大方也是它的优点,也是它的局限性.bootstrap可以实现响应式布局
后台不擅长写页面样式,就想办法让前端封装好样式放在一个CSS文件里面,文件就是bootstrap.css ,但是bootstrap没有动态效果,可以用jQuery框架来弥补没有动态效果,但是找起来太麻烦,又把好用的插件全都封装到一起,就叫bootstrap.js 简单来说就是,有很多东西都写好了,我们拿来用就可以了,

2．引入依赖类库

引入依赖cssjs
具体依赖的cssjs官网上面有,jQuery类库必须在上面引入(必须是1.12或者以上版本)

注意,jsp文件引入的时候需要加上项目名,否则无效




（二）基本样式和使用

1．内联列表




2．日期插件


Bootstrap[笔记] - 图1
<div class=”form-group”>
<label for=”date” class=”col-sm-2 control-label”>出生日期</label>
<div class=”col-sm-6”>
<input type=”date” class=”form-control” >

</div>
</div>

3．性别单选,拿过来就能用radio












4．布局划分行问题

划分多少行的时候按照图片最大的划分,因为bootstrap不能合并,但是可以嵌套容器

5．input在标签内设置禁止输入空格

1.通过正则匹配解决问题
此处涉及\s:匹配任意空白符 \S:匹配任意非空白字符

6．页面添加背景图片:

该添加的背景图片是平铺满页面的背景图片

<``**html**``>
<``**body**``>


Bootstrap[笔记] - 图2_img/BeijingTupian.jpg"_ width=_"100%"_ height=_"100%"_>
`<br /></**body**> <br /></**html**><br />并且平铺的`

7．开发步骤

先创建

container-fluid //这个是容器
再创建
//这个标签是行的意思

里面再创建
//标签给行划分多少份的意思一行能划分12份

8．在head标签里面写

bootstrap快速创建快捷键
.container>row9 然后按tab —eclipse不能使用
Bootstrap[笔记] - 图3
.container>row9
.col-sm-4*3 占四份,一份占三个单元格

（三）基本样式和使用

1．内联列表




2．日期插件


Bootstrap[笔记] - 图4
<div class=”form-group”>
<label for=”date” class=”col-sm-2 control-label”>出生日期</label>
<div class=”col-sm-6”>
<input type=”date” class=”form-control” >

</div>
</div>

3．性别单选,拿过来就能用radio












4．布局划分行问题

划分多少行的时候按照图片最大的划分,因为bootstrap不能合并,但是可以嵌套容器

5．input在标签内设置禁止输入空格

1.通过正则匹配解决问题
此处涉及\s:匹配任意空白符 \S:匹配任意非空白字符

6．页面添加背景图片:

该添加的背景图片是平铺满页面的背景图片

<``**html**``>
<``**body**``>


Bootstrap[笔记] - 图5_img/BeijingTupian.jpg"_ width=_"100%"_ height=_"100%"_>
`<br /></**body**> <br /></**html**><br />并且平铺的`

7．开发步骤

先创建

container-fluid //这个是容器
再创建
//这个标签是行的意思

里面再创建
//标签给行划分多少份的意思
一行能划分12份

8．在head标签里面写

bootstrap快速创建快捷键
.container>row9 然后按tab —eclipse不能使用
Bootstrap[笔记] - 图6
.container>row9
.col-sm-4*3 占四份,一份占三个单元格

9．模态框的使用

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
使用前需要导入bootstrap类库, 在button按钮绑定东西

属性:
data-toggle=“modal” 是固定的参数(不需要改变)
data-target=“#newModel” 是选择的模态框的id (里面参数格式: #模态框的id)

新建按钮:


模态框案例实体类(里面的内容根据需求进行修改)







编辑











分类名称









（四）开始页面开发步骤

1．布局

表格table相当于 container 或者container-fluid
表格的行相当于 row
行里面单元格 col--

.container-fluid>row3 快捷设置
下面是详细的说明

表格系统可以合并单元格,而栅格系统不能合并,但是可以拆分,可以单元格里面再写个容器

栅格布局(综合了table表格布局的简单易用和div css布局的高效形成了一种新的布局方式)
本质还是div+css,但是应用上接近table布局

Bootstrap[笔记] - 图7
整体类似于表格table
行:类似表格的td

容器: container
div class =”container” 这就是容器
div class =”container-fluid” 这是容器占满 就是宽度始终是100%
容器里面的行:
div class = “row” 这就是行
bootstrap 把行分为12份

行里面对应的单元格栅格系统是
col-- 类似于单元格 一行有12.
第一个 设备类型(说白了就是浏览器宽度而已,是bootstrap系统划分好的
有四类: 1 lg: 大型设备(大于等于1200px)
2 md:中型设备(992px~1200px)
3 sm:小型设备(768px~992px) 我看到老师教学都是用sm来做的
4 xs:超小型设备(0px~768px)

说白了就是按照浏览器宽度区分的)
第二个 就是单元格占12份的几份
如果一行单元格加起来超过12份,就下一行显示
如果一行单元格加起来不够12份,就空下来留下空白

col-md-3:表示如果浏览器是中型设备之间的话这个单元格要占3份
如果实际的设备类型大于设置的设备类型,那么设置的样式依然生效
如果实际的设备类型小于设置的设备类型，那么单元格宽是100%

例如：实际设备类型是sm，而单元格设置的是col-md-3，那么这个col-md-3不会生效，单元格占100%

Bootstrap[笔记] - 图8
如果一个单元格设置了各个设备类型的样式，那么bootstrap的栅格系统会根据实际的设备类型，自动选择对应的样式生效
补充：
hidden-: 某种设备类型时隐藏，其它情况显示
visible-*: 某种设备类型时显示，其它情况隐藏

（五）官网提供东西使用

1．官网提供的东西分三类:

全局css样式 :写好标题超链接样式图片或者按钮文本框样式 ,我们直接用就行
组件 : 是一批HTML标签组合形成的一些元素,比如导航条之类的
JavaScript的插件: 设计动态功能的应用到JS的代码

2．全局css样式

Bootstrap[笔记] - 图9
横向排列一般用于多个超链接横向排列
Bootstrap[笔记] - 图10
———-
表单
Bootstrap[笔记] - 图11
太长怎么办 ,可以写一个布局放里面就行了
Bootstrap[笔记] - 图12 这是快捷设置 三个单元格 ,每个占四份
但是注意提供的代码只有基本的样式,属性可能没有,需要我们完善

3．组件

字体图标
传统的图标是需要保存再引用太麻烦,这个是把它弄成字体,但是显示的时候显示的是图标
注意版权问题
Bootstrap[笔记] - 图13
怎么使用 下面英文都是对应的class描述
div span i都可以使用,一般使用i标签来显示图标,习惯
Bootstrap[笔记] - 图14
把粘贴的英文放到class里面就有图标了 style=”font-size:100px” 是设置字体图标的,对这个也适用,color是颜色
———-
导航条
Bootstrap[笔记] - 图15

4．插件

比如轮播图

（六）其他扩展

1．禁用响应式布局方法

Bootstrap[笔记] - 图16