Bootstrap笔记（一）

Bootstrap：是一个前端库，它提供了许多样式给用户使用。

一、Bootstrap的导入

1、在Bootstrap中文网下相应的bootstrap文件：css、fonts、js

2、由于bootstrap是在jquery的支持下，所以需要下载对应的jquery文件，此处不表。

二、Bootstrap的标准模板

<!DOCTYPE html>
<html>
	<head>
		<!--设置UTF编码-->
		<meta charset="UTF-8">
		<!--设置移动设备优先-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<!--引入css，js，jq文件-->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
	</head>

	<body>
		
	</body>
</html>

三、Bootstrap的使用：大多在标签内添加相应类名即可。

四、Bootstrap的布局容器

container-fluid：布满容器

container：80容器，实现内容居中对齐

五、Bootstrap文字样式

bg-primary：蓝底白字

text-left 向左对齐文本
text-center 居中对齐文本
text-right 向右对齐文本
text-muted 本行内容是减弱的
text-primary 本行内容带有一个 primary class
text-success 本行内容带有一个 success class
text-info 本行内容带有一个 info class
text-warning 本行内容带有一个 warning class
text-danger 本行内容带有一个 danger class
text-justify   设定文本对齐,段落中超出屏幕部分文字自动换行
text-nowrap   段落中超出屏幕部分不换行
text-lowercase   设定文本小写
text-uppercase   设定文本大写
text-muted   文本样式

六、列表样式

list-unstyled 未定义样式列表
list-inline 内联列表，将列表内容（li标签的内容）排成一行

七、表格样式

注意：table是所有其它表格样式的父类，若想添加其它样式，先添加table,在table后面添加即可（使用空格分隔）

table 表格
table-striped 隔行变色
table-bordered 表格边框线
table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
table-condensed 让表格更加紧凑

以下状态类只能由<tr>、<td>或者<th>标签使用

active 鼠标悬停在行或者单元格时所设置的颜色
success 表示成功的操作
info 表示信息变化的操作
warning 表示一个警告的操作
danger 表示一个危险的操作

八、按钮样式 btn ：父类（与table相似），添加其它样式前必须先添加此样式

1、颜色样式
btn-default   默认/标准按钮（白色）
btn-primary   原始按钮样式（蓝色）
btn-success   表示成功的动作（绿色）
btn-info   该样式可用于要弹出信息的按钮（浅蓝色）
btn-warning   表示需要谨慎操作的按钮（橙色）
btn-danger   表示一个危险动作的按钮操作红色）
btn-link   让按钮看起来像个链接 (仍然保留按钮行为)

2、大小样式

btn-sm 小按钮

btn-lg 超大按钮

btn-xs 超小按钮

3、其它样式

btn-block   块级按钮(拉伸至父元素100%的宽度)
active   按钮被点击样式
disabled   禁用按钮

例如百度超链接添加按钮样式：

    <a href="http://www.baidu.com" class="btn btn-success  btn-lg">百度</a>

九、图片样式

img-circle 椭圆型图片
img-rounded   圆角图片
img-thumbnail   添加一些内边距（padding）和一个灰色的边框
img-responsive   响应式图片（即随着浏览器大小的变动而变动图片大小）

十、背景颜色样式

bg-primary：蓝底白字
bg-success
bg-info
bg-warning
bg-danger

Bootstrap笔记（一）

猜你喜欢