一、字体图标
进入bootstrap官方文档的组件页面https://v3.bootcss.com/components/，最上面的组件就是字体图标“Glyphicons 字体图标”部分。在控件的class中声明字体图标，既加一个class样式“glyphicon”，然后把在这里找到图标后把图标对应的名字单词class样式放到相应的控件里：
<div class="container">
<div class="row">
<div class="glyphicon glyphicon-ok" style="color:red; font-size:40px;"></div>
aaaaa
</div>
</div>
由于字体图标看起了是个图片图标，担实际可以把它当成字体来对待，所以控制其大小颜色等样式就跟控制一般的字体一样。
二、颜色设置
最常用的颜色样式有如下几个：primary success info warning danger。不同的控件由相应的前缀加上这些单词即可控制控件的颜色。各控件对应的前缀如下：
文字设置：text-
背景设置：bg-
按钮设置：btn-
弹窗设置：alert-
面板设置：panel-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!---->
<link rel="stylesheet" href="css/bootstrap.css" />
<style>
.tips1{
width:30px;
height:300px;
background:black;
right:0
}
.tips2{
width:30px;
height:100px;
background:blue;
right:0;
}
#div1{
width:400px;
}
</style>
</head>
<body style="height:2000px;">
<div class="container">
<div class="row">
<input type="button" value="默认样式"/>
<input type="button" value="首选项" class="btn btn-primary"/>
<input type="button" value="成功" class="btn btn-success"/>
<input type="button" value="一般信息" class="btn btn-info"/>
<input type="button" value="警告" class="btn btn-warning"/>
<input type="button" value="危险" class="btn btn-danger"/>
<p>默认段落</p>
<p class="bg-primary">首选项</p>
<p class="bg-success">成功</p>
<p class="bg-info">一般信息</p>
<p class="bg-warning">警告</p>
<p class="bg-danger">危险</p>
<br />
<span>默认文字</span>
<span class="text-primary">首选项</span>
<span class="text-success">成功</span>
<span class="text-info">一般信息</span>
<span class="text-warning">警告</span>
<span class="text-danger">危险</span>
<br />
<a href="#" class="btn btn-primary">链接1</a>
<a href="#" class=" bg-success">链接1</a>
<a href="#" class=" bg-danger">链接3</a>
<br />
<div class="alert alert-danger">我是警告框</div>
<div id="div1" class="panel panel-primary">
<div class="panel-heading">
<h4>我是面板的标题</h4>
</div>
<div class="panel-body">
我是面板的主体内容
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.js"></script>
</html>
三、登录面板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="css/bootstrap.css" />
<style>
.tips1{
width:30px;
height:300px;
background:black;
right:0
}
.tips2{
width:30px;
height:100px;
background:blue;
right:0;
}
#login{
width:400px;
}
</style>
</head>
<body style="height:2000px;">
<!--
form-group 定义表单控件
form-control 设置表单元素的样式
也可以通过css文件 具体修改样式
-->
<div class="container">
<div id="login" class="panel panel-primary">
<div class="panel-heading">
Login
</div>
<div class="panel-body">
<div class="form-group">
<label>用户名:</label><input type="text" class="form-control" />
<div class="alert alert-warning">用户名不能为空</div>
<label>密码:</label><input type="password" class="form-control" />
</div>
<a href="#" class="text-info">忘记密码</a>
<input type="button" value="登陆" class="btn btn-primary pull-right" />
</div>
</div>
</div>
</body>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.js"></script>
</html>
四、其他
常用样式效果解析如下：
active：背景加深。
disabled：不可点，不可触发。
lg、md、sm、xs除了是栅格系统控制占用空间大小的关键字，也可以是控制控件大小的关键字。
col-**-n是栅格系统的用法；
btn-**用于控制按钮大小。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!---->
<link rel="stylesheet" href="css/bootstrap.css" />
<style>
.tips1{
width:30px;
height:300px;
background:black;
right:0
}
.tips2{
width:30px;
height:100px;
background:blue;
right:0;
}
#div1{
width:400px;
}
</style>
</head>
<body style="height:2000px;">
<div class="container">
<div class="row">
<input type="button" value="首选项" class="btn btn-primary"/>
<input type="button" value="首选项" class="btn btn-primary active"/>
<input type="button" value="首选项" class="btn btn-primary disabled"/>
<br />
<input type="button" value="首选项" class="btn btn-primary btn-lg"/>
<input type="button" value="首选项" class="btn btn-primary btn-md"/>
<input type="button" value="首选项" class="btn btn-primary btn-sm"/>
<input type="button" value="首选项" class="btn btn-primary btn-xs"/>
</div>
</div>
</body>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.js"></script>
</html>
