head中包含以下代码:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后!确保支持响应式布局 -->
<title>Title</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="bootstrap.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="jquery.js" async></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="bootstrap.js" async></script>
</head>
<!-- col-xs-4 : 指小于768px的小设备-->
<!-- col-sm-4 :指>=768px的设备-->
<!-- col-md-4 :指>=992px设备-->
<!-- col-lg-4 :值1200px设备-->
<div class="container"><!--或者container-fluid-->
<div class="row">
<div class="col-xs-4" style="background: red; text-align: center">11</div>
<div class="col-xs-4" style="background: green; text-align: center">22</div>
<div class="col-xs-4" style="background: blue; text-align: center">33</div>
</div>
</div>
bootstrap把页面设置为12列。三个div所以设置col-xs-4,如果是4个div,那么就设置col-xs-3 布局设置(修改过的,方便自己写)
.container {
width: 500px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container * {//注意这个,要算边框距离
box-sizing: border-box;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-xs-4 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
width: 33.33333333%;
float: left;
}
form-control类:含有此类的标签宽度都将变为width:100%,且在表单中通常是将控件配合label标签一起包含在form-group中使用
<form role="form">
<div class="form-group">
<label for="exampleInputEmail">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="input">
</div>
<div class="form-group">
<label for="exampleInputEmail">Email name</label>
<textarea class="form-control">11111</textarea>
</div>
<div class="form-group">
<label for="select">select form</label>
<select class="form-control" id="select">
<option>111</option>
<option>222</option>
</select>
</div>
</form>
<!-- form-inline类使表单水平呈现-->
<form class="form-inline">
<!--<div class="col-sm-4"></div>-->//为了使整个对象居中
<div class="form-group">
<label for="exampleInputAmount">Amount</label>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
<button type="submit" class="btn btn-primary">search</button>
</form>
<!--水平排列的表单 control-label:表示文本采用右对齐 -->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-sm-4 control-label">Email:</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail" placeholder="email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-4 control-label">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword" placeholder="password">
</div>
</div>
</form>
css文件:
/*basic*/
* {
box-sizing: border-box;
}
.form-group {
margin-bottom: 15px;
}
.form-control {
display: block;
width: 100%;
height: 2em;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
/*expand*/
.form-group .form-control {
/*这里可以修改参数让form-group内部的form-control变换样式,比如修改背景色*/
}
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-group .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.btn {
display: inline-block;
padding: 3px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
<!-- bootstrap制作导航菜单 -->
<!-- 纵向导航栏:nav-tabs ,nav-pills(使导航呈现胶囊状),nav-stacked(使水平导航变为竖直导航),nav-justified(实现导航均等宽度排列) -->
<div class="sideBar-menu ">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">首页</a></li>
<li><a href="#">关于我</a></li>
<li><a href="#">那些年</a></li>
<li><a href="#">碎碎念</a></li>
<li><a href="#">留言板</a></li>
<li><a href="#">情感语</a></li>
</ul>
</div>
<!-- 横向导航栏:导航依赖于nav类nav-tabs类依赖nav类 -->
<ul class="nav nav-tabs">
<li role="presentation" class=""><a href="#">Home</a></li>
<li role="presentation" class=""><a href="#">Profile</a></li>
<li role="presentation" class=""><a href="#">Messages</a></li>
</ul>
css样式:
.sideBar-menu {
margin: 20px auto;
width: 180px;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
display: block;
}
/*直属节点*/
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eee;
}
/*重写鼠标滑过的样式*/
.nav li a:hover {
background-color: #337ab7;
color: #fff;
}
.nav > li > a > img {
max-width: none;
}
.nav-pills > li {
float: left;
}
.nav-pills > li > a {
border-radius: 4px;
}
.nav-pills > li + li {
margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
color: #fff;
background-color: #337ab7;
}
.nav-stacked > li {
float: none;
}
.nav-stacked > li + li {
margin-top: 2px;
margin-left: 0;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
border-color: #eee #eee #ddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
更多请参考菜鸟教程:http://www.runoob.com/bootstrap/bootstrap-tutorial.html