Bootstrap学习笔记

Bootstrap

1.Bootstrap介绍

1.用于开发响应式布局 根据屏幕分辨率自适应

2.可以快速开发出一个页面 简单快捷

2.Bootstrap特点

1.响应式设计 12列网格

2.自定义JQuery插件 有完整的类库 Bootstrap基于JQuery开发 所以使用bootstrap必须引入JQuery 但是如果只是用样式 不使用JQuery的插件 那就无所谓了

3.Bootstrap准备工作

1.在Bootstrap官网中下载相关文件

Bootstrap官网(中文网)：Bootstrap中文网 (bootcss.com)

2.在项目中引入相关css和js文件

3.如果想要使用JQuery插件 那么要引入JQuery文件 在JQuery官网下载

JQuery官网：jQuery

4.布局容器和栅格网格系统

4.1布局容器

1.container(类名)

两侧会有留白 挂在这个类名的盒子会居中显示

2.container-fluid(类名)

占据屏幕100% 不会留白

4.2栅格网格系统

Bootstrap提供的响应式布局的流式栅格系统 随着屏幕窗口尺寸的增加 系统自动分为十二列 栅格系统通过一系列的行(row)与列(column)的组合来创建页面布局 可以将内容放在这些布局中

注意：网格系统必须使用css

数据行(row)必须放在容器(container)中 以便为其赋予合适的对齐方式和内边距(padding)

在行(row)中可以添加列(column) 只有列(column)才可以作为行容器(row)的直接子元素 但是列数之和不能超过平分的总列数 (12) 如果大于12 自动换行

且对于屏幕来说 有xs (xsmall phones)、sm(small tablets)、md(middle desktops)、lg(larger desktops)

即 ： 超小屏(自动) 小屏(<750px) 中屏(<970px) 大屏(<1170px)

注：和容器相同 使用行列的栅格化依旧需要打上类名

4.2.1列组合

列组合就是简单的通过加减法来让一行的所有列保持在12份之内 在十二份之内 一行都可以分开并存放 如果加入列的总和超过12 那么就会换行 超过12的整个类名所代表的代码块全部换行

（原则 ： 列组合不能超过十二行 超过十二行自动换行）

4.2.2列偏移

如果不希望相邻的两个列紧靠在一起 但又不希望使用margin或者其他的技术 那么就可以使用列偏移(offset)来实现

列偏移很简单 只需要在列元素上加上类名 "col-md-offset-*"(其中星号代表要偏移的列组合数) 那么具有这个类名的代码块(列)就会偏移

例如：在列元素上加"col-md-offset-8" 表示该列向右移动八个列的宽度 （要保证偏移列总数不超过12 不然会换行）

4.2.3列排序

列排序改变列的方向 就是改变左右浮动 并且设置浮动的距离

在Bootstrap中使用类名"col-md-push-*" 和 "col-md-pull-*" (星号代表移动的列组合数) 往前pull 往后push

列偏移和列排序的区别 ： 列偏移的时候 除了便宜的列 其后面的列也会跟着偏移

但是列排序时 存在先后顺序 如果我们向左排序 那么被排序的元素就会覆盖掉左边的元素 但是向右排序时 被排序的元素会被原有的右方元素覆盖掉

因为代码是从前向后执行的 如果向左移动 那么说明左边的元素已经布置好了 排序后会覆盖左方元素 如果向右移动 那么右方的元素还没有布置 排序的元素右移 就会被还未布置的右方元素所覆盖

4.2.4列嵌套

Bootstrap支持列的嵌套 也就是说我们可以在一个列中嵌套一个或多个行(row)容器 然后在行(row) 容器中接着插入列(column)

5.常用样式

5.1排版

5.1.1标题

使用Bootstrap的样式之后 对于标题<h*>的样式会有一些影响

提供了对应类名 为非标题元素设置样式 类似.h1--.h6

Bootstrap也提供了类似副标题的标签&类名 <small>&.small

5.1.2段落

通过.lead来强化突出内容 （作用是增大文本字号 加粗文本 且对行高和margin进行处理）

5.1.3强调

强调的作用体现在这些类名改变了颜色 通过颜色的改变来表示强调

.text-muted : 提示 使用浅灰色

.text-primary : 主要 使用蓝色

.text-success : 成功 使用浅绿色

.text-info : 通知信息 使用浅蓝色

.text-warning : 警告 使用黄色

.text-danger : 危险 使用褐色

5.1.4对齐效果

类似于css中的text-align

Bootstrap通过类名控制

text-left 左对齐

text-right 右对齐

text-justify 两端对齐

两端对其可以解决中文换行时 所空出的间隙时大时小的问题

5.1.5列表

去点列表 class="list-unstyled"

内联列表：把垂直列表换为水平列表 去掉编号 保持水平显示 class="list-inline"

定义列表：<dt><dl> 在原有的基础上加入了样式 水平定义列表 内容超过160px的部分自动转换为省略号

类名要加在ul上

5.1.6代码

在个人博客上使用频繁 用于显示代码的风格 三种样式：

(1)使用<code></code> 显示单行内联代码

(2)使用<pre></pre> 显示多行代码块

样式 ： pre-scrollable(height,max-height高度固定，为340px，超过出现滚动条)

(3)使用<kbd></kbd> 来显示用户输入的代码 例如快捷键

5.1.7表格

表格样式

1）基础表格 .table

2）斑马线表格 .table-striped

3）带边框的表格 .table-bordered

4）鼠标悬停高亮的表格 .table-hover

5）紧凑型表格 .table-condensed 单元格没有内距或者较其他表格内距小

tr、td、th样式

.active 将悬停的颜色应用于行或单元格上

.success 表示成功的操作

.info 表示信息变化的操作

.warning 表示警告操作

.danger 表示危险操作

只是改变颜色

5.2表单

5.2.1表单控件

表单控件 ： form-control input-lg （大） input-sm （小）

输入框 text

下拉菜单<select></select>

其中 下拉框多选 加入属性 multiple="multiple"

文本域 textarea

以上属性都可以使用表单控件中的类名进行修改样式

复选框 checkbox

垂直显示 .checkbox

水平显示 .checkbox-inline

单选框 radio

垂直显示 .radio

水平显示 .radio-inline

按钮 button

1）使用button实现 基础样式 .btn

附加样式 ：

.btn-primary

.btn-info

.btn-success

.btn-warning

.btn-danger

.btn-link

.btn-default

2）多标签支持 使用a div span 等标签加上类名即可变为按钮

3）按钮大小 .btn-lg .btn-sm .btn-xs

4）按钮禁用 在标签中添加disabled属性 即disabled="disabled"

如果在disabled修饰的标签上书写了js逻辑（绑定js事件等）那么事件依旧会被触发

disabled只是css方面的转化 并不是真正的禁用

5.2.2表单布局

创建基本表单的步骤：

1）向父元素<form> 添加 role = "form"

2）把标签和控件放在一个带有class="form-group"的<div>中 这是获取最佳间距必须的

3）向所有的文本元素<input>,<textarea>,<select>添加class="form-control"

水平表单

同一行显示 form-horizontal 可以配合Bootstrap的网格系统

内联表单

.form-inline 所有表单组(class="form-group")横向排列

5.3缩略图

可以配合网格系统 实现缩略图 .thumbnail

5.4面板

默认的.panel组件所做的只是设置基本的边框（border）和内距（padding）来包含内容

.panel-default：默认样式

.panel-heading：面板头

.panel-body：面板主体内容

6.导入Bootstrap插件

6.1导航

使用下拉和按钮结合制作导航

1.基本样式

.nav 与 "nav-tabs" 、 "nav-pills" 组合制作导航

2.分类

1）标签型（nav-tabs）导航

2）胶囊型（nav-pills）导航

3）堆栈（nav-stacked）导航

4）自适应（nav-justified）导航

5）面包屑（breadcrumb）导航 单独使用样式 不与nav一起使用 直接加入到ul、ol中即可 一般用于导航 主要起的作用是告诉用户现在所处的（页面）的位置

6）分页导航（pagination）

7）翻页导航（pager）

3.状态

1）选中状态 active 样式

2）禁用状态 disable

4.二级菜单

5.下拉菜单

想用下拉菜单 必须使用两个js

 

要点：

 

6.模态框

模态框是覆盖在父窗体上的子窗体 通常 目的是显示来自单独一个源的内容 可以在不离开父窗体的情况下有一些互动 子窗体可以提供信息、交互

用法

1.通过data属性：在控制器元素（比如按钮或链接）上设置属性 data-toggle="modal" 同时设置data-taget="#identifier"或href="#identifier"来指定要切换特定的模态框（带有id="identifier"）

2.通过JavaScript：使用这种技术 可以通过Js来调用带有id="identifier"的模态框