初识 Bootstrap

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">&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>

最后编辑于：2018.03.29 20:26:53

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,335评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,895评论 3赞 387
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,766评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,918评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,042评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,169评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,219评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,976评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,393评论 1赞 304
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,711评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,876评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,562评论 4赞 336
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,193评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,903评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,142评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,699评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,764评论 2赞 351

初识 Bootstrap

下载

demo

推荐阅读更多精彩内容