1 安装和基本使用
可以正常下载使用
有三个文件夹, 分别是css, fonts, js
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
其中名字是min是压缩后的文件
一般引用都是使用本地的, 当然官网支持在线的
初步的使用如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--这个是支持移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>ch01</title>
<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" />
<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
</head> <body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" >Project name</a>
</div> <div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#" rel="external nofollow" rel="external nofollow" >Home</a>
</li>
<li>
<a href="#about" rel="external nofollow" >About</a>
</li>
<li>
<a href="#contact" rel="external nofollow" >Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</body>
</html>
2 栅格系统
栅格系统是将页面等分为12份
栅格系统的参数
具体使用范例就是
但是这由于左右还有空白, 所以原来的container可以换成container-fluid
另外占多少格子的多少从小到大是自适应的
例如使用col-md-* 这个只有在中等及以上的时候, 显示是那个比例, 如果小于中等比例之后, 每个就独占一行了
所以要使得全部分辨率的显示都不变的话, 可以设置col-xs-*
可以使用col-*-offset-* 来左空格
列可以嵌套, 相当于把父类部分再等分成12份在用
向右push向左pull
不同分辨率的内容可以写在一起, 谁满足谁生效
