Bootstrap 是一个由 Twitter 开源的前端框架，是目前最受欢迎的前端框架，也是 github 上最火的前端框架。Bootstrap 基于 HTML、CSS、JavaScript ，它简洁灵活，使 Web 开发更加的快捷。
在构建 Web 应用时，一个最头疼的问题就是各种浏览器的兼容性，同时还要考虑各种手机的页面的适配，而使用 Bootstrap 可以快速搭建出一个简洁美观的界面。只要你具备 HTML 和 CSS 的基础知识，就可以开始学习 Bootstrap。
下载
可以访问 bootatrap 的英文官方网站，
也可以访问 bootstrap 的中文网站
下载哪个呢？笔者用的是用于生产环境的 Bootstrap
download.png
下载成功后可以得到一个 bootstrap-3.3.7-dist.zip 的文件，解压后我们可以得到一个包含css、fonts和js的文件夹。
bootstrap-3.3.7-dist
├── css
│ ├── bootstrap-theme.css //主题的样式
│ ├── bootstrap-theme.css.map //map 是映射
│ ├── bootstrap-theme.min.css //.min 是压缩版本
│ ├── bootstrap.css //我们将要用到的主要的部分
│ ├── bootstrap.css.map
│ └── bootstrap.min.css
├── fonts //字体
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js //脚本
├── bootstrap.js //我们将要用到的主要的部分
├── bootstrap.min.js
demo
根据官网上的示例，做了个简单的测试页面：
第一步：导入 bootstrap.css、 bootstrap.js 和 jquery-1.12.4.js
bootstrap的js必须依赖Jquery。所以在导入JS的时候，得先导入Jquery.
第二步：根据示例做一下简单修改
Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。当你用不同的设备打开时，能够根据平台的不同自动调节样式：
效果图：
bootstrap.gif
笔者使用了两个组件，一个是 jumbotron（超大屏幕）；一个是 checkout （表单）；
jumbotron 是使被修饰的部分以超大的字体显示，可以很明显的看出 h1 字体变得巨大；
其中 h1 small 是指被修饰的是 h1 的副标题，以浅灰色的小号字体显示；
checkout 表单中有两部分，左边的购物车和右边的账单地址，很普通的表单。当你的平台变化时，
表单的位置和大小自动适应；
下面的效果更加明显：屏幕小时只能看到图标，屏幕大时可以看到图标加文字
bootstrap2.gif
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron container">
<div >
<h1>Hello, world! <small>hello</small></h1>
</div>
</div>
<div class="container">
<div class="py-5 text-center">
<h2>订单确认</h2>
<p class="lead">这是一个测试用的表单</p>
</div>
<div class="row">
<div class="col-md-4 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">购物车</span>
<span class="badge badge-secondary badge-pill">2</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">水杯 500ml</h6>
<small class="text-muted">小马哥水杯自营</small>
</div>
<span class="text-muted">￥50</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">背包</h6>
<small class="text-muted">威尔仕专营</small>
</div>
<span class="text-muted">￥380</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>合计：</span>
<strong>￥430</strong>
</li>
</ul>
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="优惠码">
<div class="input-group-append">
<button type="submit" class="btn btn-secondary">兑换</button>
</div>
</div>
</form>
</div>
<div class="col-md-8 order-md-1">
<h4 class="mb-3">账单地址</h4>
<form class="needs-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">会员号</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">
会员号不能为空
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">联系电话</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
联系电话不能为空
</div>
</div>
</div>
<br/>
<div class="mb-3">
<label for="username">真实姓名</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"></span>
</div>
<input type="text" class="form-control" id="username" placeholder="" required>
<div class="invalid-feedback" style="width: 100%;">
姓名不能为空
</div>
</div>
</div>
<br/>
<div class="mb-3">
<label for="address">地址</label>
<input type="text" class="form-control" id="address" placeholder="深圳市罗湖区" required>
<div class="invalid-feedback">
请输入收货地址
</div>
</div>
<br/>
<div class="mb-3">
<label for="address2">地址 2 <span class="text-muted">(可选)</span></label>
<input type="text" class="form-control" id="address2" placeholder="深圳市龙岗区">
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="country">省份</label>
<select class="custom-select d-block w-100" id="country" required>
<option value="">请选择</option>
<option>广东省</option>
<option>湖南省</option>
</select>
<div class="invalid-feedback">
请选择一个省份
</div>
</div>
<div class="col-md-4 mb-3">
<label for="state">State</label>
<select class="custom-select d-block w-100" id="state" required>
<option value="">请选择</option>
<option>罗湖区</option>
<option>龙岗区</option>
</select>
<div class="invalid-feedback">
请选择一个地区
</div>
</div>
<div class="col-md-3 mb-3">
<label for="zip">邮编</label>
<input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback">
邮编不能为空
</div>
</div>
</div>
<hr class="mb-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="save-info">
<label class="custom-control-label" for="save-info">保存地址</label>
</div>
<hr class="mb-4">
<h4 class="mb-3">付款</h4>
<div class="d-block my-3">
<div class="custom-control custom-radio">
<input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>
<label class="custom-control-label" for="credit">信用卡</label>
</div>
<div class="custom-control custom-radio">
<input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="debit">银联卡</label>
</div>
<div class="custom-control custom-radio">
<input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="paypal">支付宝</label>
</div>
<div>
<input id="wechat" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="wechat">微信</label>
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">确认提交</button>
</form>
</div>
</div>
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">© 2017-2018 版权所有</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">隐私条款</a></li>
<li class="list-inline-item"><a href="#">帮助中心</a></li>
<li class="list-inline-item"><a href="#">技术支持</a></li>
</ul>
</footer>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
网友评论