Web11--Bootstrap

1、Bootstrap入门

1.1 Bootstrap简介

官网:Bootstrap中文网

Web11--Bootstrap_第1张图片

1.2 Bootstrap引入



	
		
		
		初识Bootstrap
		
		
		
		
		
		
		
		
		
	
	
	

2、全局CSS样式

2.1 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

...

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

...

2.2 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。

2.2.1 栅格参数

Web11--Bootstrap_第2张图片



	
		
		
		栅格系统
		
		
		
		
		
		
		
		
		
		
		
	
	
		
		
1
2
3
4
1
2
3
1
2
1
2

2.2.2 列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。



	
		
		
		列偏移
		
		
		
		
		
		
		
		
		
		
		
	
	
		
		
1
2
3
4
1
2
3
1
1
2
3

2.3 排版

Web11--Bootstrap_第3张图片

2.4 表格

基本实例

为任意

标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。

条纹状表格

通过 .table-striped 类可以给

之内的每一行增加斑马条纹样式。

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

鼠标悬停

通过添加 .table-hover 类可以让

中的每一行对鼠标悬停状态作出响应。

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

状态类

通过这些状态类可以为行或单元格设置颜色。

Class

描述

.active

鼠标悬停在行或单元格上时所设置的颜色(灰色)

.success

标识成功或积极的动作(绿色)

.info

标识普通的提示信息或动作(蓝色)

.warning

标识警告或需要用户注意(黄色)

.danger

标识危险或潜在的带来负面影响的动作(红色)



	
		
		表格
		
		
		
		
		
		
		
		
	
	
		
		
学号 姓名 性别
191458751526 张三
195875484859 李四

2.5 表单

具体参见Bootstrap-v3文档

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的