Bootstrap是用于快速开发web应用程序和网站的前端框架。Bootstrap基于HTML、CSS和JavaScript。
基本结构
bootstrap提供了包含网格系统、链接样式和背景的基本结构。这将在bootstrap的基本结构中详细解释。
CSS:bootstrap具有以下特性：全局CSS设置、定义基本HTML元素样式、可扩展类和高级网格系统。这将在引导CSS部分详细解释。
组件：引导包含十多个可重用组件，用于创建图像、下拉菜单、导航、警告框、弹出框等。这将在布局组件部分详细解释。
JavaScript插件：bootstrap包含十多个自定义jQuery插件。您可以直接或逐个包含所有插件。
实例
<div class="container">
<div class="jumbotron">
<h1>黎燃我的第一个 Bootstrap 页面</h1>
<p>黎燃</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>黎燃</p>
<p>黎燃</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>黎燃</p>
<p>黎燃</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>黎燃</p>
<p>黎燃</p>
</div>
</div>
</div>
下载 Bootstrap
可以下载 Bootstrap 的最新版本
http://getbootstrap.com/
预编译的 Bootstrap
如上图，可以看到已编译的CSS和JS（bootstrap.），以及已编译的压缩CSS和JS（bootstrap.min.）。它还包括字形的字体，这是一个可选的引导主题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线尝试 Bootstrap 实例</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
超大屏幕
bootstrap支持的另一个特性是jumbotron。顾名思义，这个组件可以增加标题的大小，并为登录页的内容添加更多的边距。使用jumbotron的步骤如下：
创建with类。用于<div>的Jumbotron容器。
除了较大的字体外，字体重量减少到200。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 超大屏幕（Jumbotron）</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>欢迎登陆页面！</h1>
<p>这是一个超大屏幕（Jumbotron）的实例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
学习更多</a>
</p>
</div>
</div>
</body>
</html>
运行结果如下：
为了获得全宽无圆角的大屏幕，请使用。Jumbotron类以外的所有。容器类，如下：
<div class="jumbotron">
<div class="container">
<h1>欢迎登陆页面！</h1>
<p>这是一个超大屏幕（Jumbotron）的实例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
学习更多</a>
</p>
</div>
</div>
结果如下：
欢迎登陆页面！
这是一个超大屏幕（Jumbotron）的实例。
本文含有隐藏内容，请 开通VIP 后查看