下载及引用
在bootstrap官网下载，解压在自己新建的站点里，比如myweb文件下。
<!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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>myweb</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- style.css-->
<link href="style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
布局容器div
<div class="container">居中显示
<div class="container-fluid">100%宽度
栅格系统
栅格系统是响应式、移动设备优先的流式栅格系统，系统会自动把一行分为最多12列，根据浏览设备不同自动调节到适应宽度。
class="row"
小屏手机<768px col-xs-列数
小屏幕平板>=768px col-sm-列数
中等屏幕>=992px col-md-列数
大屏幕>=1200px col-lg-列数
div可以嵌套，如果列数大于12多余的会另起一行，如果有些列比其他的高则使用 .clearfix。
col-md-offset-n把某一列向右偏移n列
col-md-push col-md-pull列排序
排版
标题
<h></h2>
<h></h3>
<h></h4>
<h></h5>
<h></h6>
<small></small>
small是副标题
主体p标签
<del></del>被删除标签
<s></s>无用文本
<ins></ins>插入文本
<u><u>到下划线的文本
<small></small>小号文本
<strong></strong>加粗文本
<em><em>倾斜
对齐
<p class="text-left">Left aligned text.</p>左对齐
<p class="text-center">Center aligned text.</p>居中
<p class="text-right">Right aligned text.</p>右对齐
<p class="text-justify">Justified text.</p>两端对齐
<p class="text-nowrap">No wrap text.</p>指定内容不换行
列表
<ul>
<li>...</li>
</ul>
class="list-unstyled"去掉列表前面的点
内联列表 横向排列
<ul class="list-inline">
<li>...</li>
</ul>
欲知详情请看下回分解······
网友评论