<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">//设置移动设备优先
//引入bootstrap文件路径,一般.min就行(是bootstrap.css或botstrap.js的压缩版)
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>//建立在jq基础上,所以需要引入jq
//class标签应用合集
<div class="container">//div居中显示
<!--<div class="container-fluid">-->//div全屏显示
<font class="h1">asdasdasdzxczxc</font>//h1~h6,是标题样式相当于<h1>~<h6>
//文本样式
<del>asd</del>//删除线
<b>加粗</b>
<strong>加粗</strong>
<i>斜体
<em>斜体</em>
<g>删除线</g>
//文本对齐样式
.text-left //左对齐
.text-right //右对齐
.text-center //居中对齐
.text-justify //两端对齐
<h1 class="text-center">
//列表样式
.list-unstyled //无符号,去掉前面的符号
.list-inline //行内块,放在同一行,导航栏用的
<ul class="list-unstyled">
<li>html</li>
<li>mysql</li>
</ul>
//表格样式
.table
.table-striped //背景颜色隔行变色
.table-bordered //边框
.table-hover //鼠标悬停变色,离开恢复
.table-condensed //紧凑的表格(表格减少空白)
<table class="table table-striped">
//行或单元格背景颜色,智能给<tr>或<td>添加
.active //当前样式,跟下面的区别就是颜色不一样
.success
.info
.warning
.danger
//响应式表格,将table元素包裹在.table-responsive元素内,即可创建响应式表格,窗口变小(小于768px)时table会出现滚动条
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
<tr class="active">
<td>asdzczx</td>
<td>asdzczx</td>
<td>asdzczx</td>
<td>asdzczx</td>
</tr>
</table>
</div>
//表单样式
.form-group //表单组样式:将<label>和表单元素包含其中,获得更好的排列
.form-control //表单元素 样式:常用于<input>、<textarea>、<select>
.form-control-static //比上面的form-control小一点
.form-inline
.chekbox //复选框样式
.radio //单选框样式
.disable //可以禁用单选框或复选框的文本
.form-horizontal //水平排列的表单(用于form元素)
.sr-only //隐藏元素
.checkbox-inline //控制多个复选框元素在同一行
.radio-inline
<form>
<div class="form-group">
<label for="username">用户名</label> <!--有for可以实现单击文字获得输入框焦点(focus)-->
<input class="form-control-static" type=" text" id="username" placeholder="aaaa" />
</div>
</form>
//Placehoder属性,给<input>添加提示信息
.form-inline //内联表单样式(用于form元素):使form内的元素都排在一行
.sr-only //隐藏元素
<form class="form-inline">
<div class="form-group">
<label for="username">用户名</label> <!--有for可以实现单击文字获得输入框焦点(focus)-->
<input class="form-control" type=" text" id="username" placeholder="aaaa" />
</div>
<div class="form-group">
<label for="password">密码</label> <!--有for可以实现单击文字获得输入框焦点(focus)-->
<input class="form-control" type=" text" id="password" placeholder="请输入密码" />
</div>
</form>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--会使用当前浏览器的最新内核,保证bootstrap能正常使用-->