bootstrap提供了很多组件和全局CSS样式表，我们可以找到喜欢的样式，直接复制粘贴，来快速达到我们希望的效果。
CONTENTS
官方简单实例
【 https://v3.bootcss.com/getting-started/#examples 】
这里简单的笔记下几个实例：
导航条
格式参考：【 https://v3.bootcss.com/components/#navbar 】
官方简单实例：【 https://v3.bootcss.com/examples/navbar/ 】
固定在顶部
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="custom_css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<link href="custom_css/navbar-fixed-top.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul class="nav navbar-nav">
<li class="active"><a href="/menu1">menu1</a></li>
<li><a href="/menu2">menu2</a></li><li>
</ul>
</div>
</nav>
<script src="jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
custom_css文件夹内容：
ie10-viewport-bug-workaround.css
/*!
* IE10 viewport hack for Surface/desktop Windows 8 bug
* Copyright 2014-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*
* See the Getting Started docs for more information:
* http://getbootstrap.com/getting-started/#support-ie10-width
*/
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
navbar-fixed-top.css
body {
min-height: 2000px;
padding-top: 70px;
}
栅格系统
格式参考：【 https://v3.bootcss.com/css/#grid 】
官方简单实例：【 https://v3.bootcss.com/examples/grid/ 】
从作者个人实践来看，bootstrap的栅格系统非常好用，可以快速设置比较漂亮的布局。
栅格系统最多为12列，从官方文档来看，栅格系统可以实现非常复杂的布局，这里作者只是简单笔记几个实例：
<div class="container">
<input class="btn btn-default btn-lg btn-block" type="submit" value="btn1" ></form>
<p></p>
<div class="row">
<div class="col-md-6"><input class="btn btn-primary btn-block" type="submit" value="btn2"></div>
<div class="col-md-6"><input class="btn btn-success btn-block" type="submit" value="btn3"></div>
</div>
<div class="row">
<div class="col-md-4"><input class="btn btn-danger btn-lg btn-block" type="submit" value="btn4" ></div>
<div class="col-md-4"><input class="btn" type="submit" value="btn5" ></div>
<div class="col-md-4"><input class="btn btn-info btn-small btn-block" type="submit" value="btn6" ></div>
</div>
</div>
显示如下：
面板
格式参考：【 https://v3.bootcss.com/components/#panels 】
官方简单实例：【 https://v3.bootcss.com/examples/grid/ 】
我们可以使用面板来对功能区进行划分，这样对于满屏幕按钮和输入来讲可能会友好一点。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="custom_css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<link href="custom_css/navbar-fixed-top.css" rel="stylesheet">
<style>
.content_auto_return {
white-space: pre-wrap;
}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">panel1</div>
<div class="panel-body">
<div class="content_auto_return">
1 hello world
2 hello world
</div>
</div>
</div>
<p></p>
<div class="panel panel-primary">
<div class="panel-heading">panel2</div>
<ul class="list-group">
<li class="list-group-item">hello world</li>
<li class="list-group-item">hello world</li>
</ul>
</div>
<p></p>
<div class="row">
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading">panel3:<span class="label label-success">Success</span></div>
<div class="panel-body">hello world</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading">panel4:<span class="label label-danger">Failure</span></div>
<div class="panel-body">hello world</div>
</div>
</div>
</div>
<p></p>
<div class="panel panel-warning">
<div class="panel-heading">panel5</div>
<table class="table table-bordered">
<tbody>
<tr><th>title1</th><th>title2</th></tr>
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</tbody>
</table>
</div>
</div>
<script src="jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
显示如下：
表单
格式参考：【 https://v3.bootcss.com/css/#forms 】
我们可以使用各种class属性，来做出比较友好的表单交互。
<form class="form-inline" method="post" action="/post_text">
<div class="form-group">
<input type="text" name="text1" class="form-control" placeholder="this is text1 hint">
<input type="text" name="text2" class="form-control" placeholder="this is text2 hint">
</div>
<button type="submit" class="btn btn-default">modify</button>
</form>
<p></p>
<form method="post" action="/post_radio">
<label class="radio-inline"><input type="radio" name="xx_switch" value="enable">enable</label>
<label class="radio-inline"><input type="radio" name="xx_switch" value="disable">disable</label>
<button type="submit" class="btn btn-default">change</button>
</form>
显示如下：
发表评论