初识 Bootstrap

Bootstrap 是一个由 Twitter 开源的前端框架，是目前最受欢迎的前端框架，也是 github 上最火的前端框架。Bootstrap 基于 HTML、CSS、JavaScript ，它简洁灵活，使 Web 开发更加的快捷。

在构建 Web 应用时，一个最头疼的问题就是各种浏览器的兼容性，同时还要考虑各种手机的页面的适配，而使用 Bootstrap 可以快速搭建出一个简洁美观的界面。只要你具备 HTML 和 CSS 的基础知识，就可以开始学习 Bootstrap。

下载

可以访问 bootatrap 的英文官方网站，
也可以访问 bootstrap 的中文网站

下载哪个呢？笔者用的是用于生产环境的 Bootstrap
download

下载成功后可以得到一个 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 能够自适应于台式机、平板电脑和手机。当你用不同的设备打开时，能够根据平台的不同自动调节样式：

效果图：
boot1

笔者使用了两个组件，一个是 jumbotron（超大屏幕）；一个是 checkout （表单）；
jumbotron 是使被修饰的部分以超大的字体显示，可以很明显的看出 h1 字体变得巨大；
其中 h1 small 是指被修饰的是 h1 的副标题，以浅灰色的小号字体显示；
checkout 表单中有两部分，左边的购物车和右边的账单地址，很普通的表单。当你的平台变化时，
表单的位置和大小自动适应；
下面的效果更加明显：屏幕小时只能看到图标，屏幕大时可以看到图标加文字
boot2

源码：

<!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">&copy; 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>

下载

demo

猜你喜欢