给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap.

本片导航：

一、Bootstrap的下载

Bootstrap，由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。（当前版本： v3.3.7）

网址：http://v3.bootcss.com/

1、过程分解

1） 点击"下载Bootstrap"

2）第一个"下载Bootstrap"

3）下载到html需要使用框架的目录

4）解压

二、css样式的使用

1、引用

<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">

2、查询需要样式代码

在"全局CSS样式"和"组件"里查找

1）全局CSS样式：

2）组件

3、代码举例（部分示例有兴趣的可以详细了解）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>示例1</title>

    <!--引用本地的-->

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <!--<link rel="stylesheet" href="my-style.css">-->

    <!--引用CDN-->

    <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <style>

        .c1 {

            background-color: red;

        }

    </style>

</head>

<body>

<div class="container-fluid c1">

    <table class="table table-bordered table-striped table-hover">

        <thead>

        <tr>

            <th>#</th>

            <th> 姓名</th>

            <th>爱好</th>

        </tr>

        </thead>

        <tbody>

        <tr class="active">

            <td>1</td>

            <td>Egon</td>

            <td>杠娘</td>

        </tr>

        <tr class="success">

            <td>1</td>

            <td>Egon</td>

            <td>杠娘</td>

        </tr>

        <tr class="danger">

            <td>1</td>

            <td>Egon</td>

            <td>杠娘</td>

        </tr>

        <tr class="warning">

            <td>1</td>

            <td>Egon</td>

            <td>杠娘</td>

        </tr>

        <tr class="info">

            <td>1</td>

            <td>Egon</td>

            <td>杠娘</td>

        </tr>

        </tbody>

    </table>

</div>

</body>

</html>

Bootstrap_示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>栅格示例</title>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <style>

        .c1 {

            background-color: red;

            height: 30px;

        }

    </style>

</head>

<body>

<!--放容器-->

<div class="container-fluid">

    <!--f行-->

    <div class="row">

        <!--列-->

        <div class="col-md-1 c1"></div>

    </div>

    <div class="row"></div>

    <div class="row"></div>

    <div class="row"></div>

    <div class="row"></div>

    <div class="row"></div>

</div>

</body>

</html>

Bootstrap_栅格示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>标题示例</title>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

</head>

<body>

<div class="container">

    <h1>一级标题</h1>

    <h2>二级标题</h2>

    <h3>三级标题</h3>

    <h4>四级标题</h4>

    <h5>五级标题</h5>

    <h6>六级标题</h6>

    <hr>

    <div class="h1">1级标题 36px <small>我是小字儿</small></div>

    <div class="h2">2级标题 30px</div>

    <div class="h3">3级标题 24px</div>

    <div class="h4">4级标题 18px</div>

    <div class="h5">5级标题 14px</div>

    <div class="h6">6级标题 12px</div>

    <p>啊，大海啊，大海啊，大海啊，大海啊，大海啊，大海啊，大海啊，大海</p>

    <p class="lead">全是水

        <mark>全是水</mark>全是水全是水全是水

        <del>全是水全是水全是水全是水</del></p>

</div>

</body>

</html>

Bootstrap_标题,文字示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文本对齐</title>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

</head>

<body>

<div class="container">

    <p class="text-left">左对齐.</p>

    <p class="text-center">居中.</p>

    <p class="text-right">右对齐.</p>

    <p class="text-justify">两端对齐.</p>

    <p class="text-justify">a dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia a dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia d                    a         h  ai d ou    s       hi shuia                                  dahai doushi shuia dahai doushi shuia dahai doushi shuidahai doushi shuia dahai doushi shui </p>

    <p class="text-nowrap">a dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia a dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia d                    a         h  ai d ou    s       hi shuia                                  dahai doushi shuia dahai doushi shuia dahai doushi shuidahai doushi shuia dahai doushi shui </p>

    <p class="text-nowrap">没有换行.</p>

</div>

</body>

</html>

Bootstrap_文本对齐

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>列表</title>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

</head>

<body>

<div class="container">

    <ul class="list-unstyled">

        <li>GDP</li>

        <li>翔哥</li>

        <li>强哥</li>

    </ul>

    <!--内联列表-->

    <ul class="list-inline">

        <li>Python学院</li>

        <li>Linux学院</li>

    </ul>

    <!--描述-->

    <dl>

        <dt>Egon</dt>

        <dd>被Python耽误的相声演员</dd>

    </dl>

    <!--代码-->

    <!--<  > &nbsp-->

    <code>&lt;div&gt;</code>

    <!--代码片段-->

    <pre>&lt;p&gt;我是P标签的内容&lt;/p&gt;</pre>

    <pre>print("Hello world")</pre>

    <!--程序输出-->

    <samp>Hello world</samp>

</div>

</body>

</html>

Bootstrap_列表示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单示例</title>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

</head>

<body>

<div class="container">

    <div class="row">

        <!--col-md-offset-2 偏移-->

        <!--pull-right  pull-left-->

        <div class="col-md-6 pull-right">

            <form>

                <div class="form-group">

                    <label for="exampleInputEmail1">Email address</label>

                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">

                </div>

                <div class="form-group">

                    <label for="exampleInputPassword1">Password</label>

                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

                </div>

                <div class="form-group">

                    <label for="exampleInputFile">File input</label>

                    <input type="file" id="exampleInputFile">

                    <p class="help-block">Example block-level help text here.</p>

                </div>

                <div class="checkbox">

                    <label>

                        <input type="checkbox"> Check me out

                    </label>

                </div>

                <button type="submit" class="btn btn-default">Submit</button>

            </form>

        </div>

    </div>

    <div class="row">

        <div class="">

            <form class="form-inline">

                <div class="form-group">

                    <label for="exampleInputName2">Name</label>

                    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">

                </div>

                <div class="form-group">

                    <label for="exampleInputEmail2">Email</label>

                    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">

                </div>

                <button type="submit" class="btn btn-default">Send invitation</button>

            </form>

        </div>

    </div>

    <div class="row">

        <div>

            <form class="form-inline">

                <div class="form-group">

                    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>

                    <div class="input-group">

                        <div class="input-group-addon">￥</div>

                        <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">

                        <div class="input-group-addon">*</div>

                    </div>

                </div>

                <button type="submit" class="btn btn-primary">Transfer cash</button>

            </form>

        </div>

    </div>

</div>

</body>

</html>

Bootstrap_表单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单示例</title>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

</head>

<body>

<div class="container">

    <div class="row">

        <!--col-md-offset-2 偏移-->

        <!--pull-right  pull-left-->

        <div class="col-md-6 pull-right">

            <form>

                <div class="form-group">

                    <label for="exampleInputEmail1">Email address</label>

                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">

                </div>

                <div class="form-group">

                    <label for="exampleInputPassword1">Password</label>

                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

                </div>

                <div class="form-group">

                    <label for="exampleInputFile">File input</label>

                    <input type="file" id="exampleInputFile">

                    <p class="help-block">Example block-level help text here.</p>

                </div>

                <div class="checkbox">

                    <label>

                        <input type="checkbox"> Check me out

                    </label>

                </div>

                <button type="submit" class="btn btn-default">Submit</button>

            </form>

        </div>

    </div>

    <div class="row">

        <div class="">

            <form class="form-inline">

                <div class="form-group">

                    <label for="exampleInputName2">Name</label>

                    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">

                </div>

                <div class="form-group">

                    <label for="exampleInputEmail2">Email</label>

                    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">

                </div>

                <button type="submit" class="btn btn-default">Send invitation</button>

            </form>

        </div>

    </div>

    <div class="row">

        <div>

            <form class="form-inline">

                <div class="form-group">

                    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>

                    <div class="input-group">

                        <div class="input-group-addon">￥</div>

                        <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">

                        <div class="input-group-addon">*</div>

                    </div>

                </div>

                <button type="submit" class="btn btn-primary">Transfer cash</button>

            </form>

        </div>

    </div>

</div>

</body>

</html>

Bootstrap_下拉框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>导航条示例</title>

    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">

</head>

<body>

<!--不用放到container-->

<!--nav标签-->

<nav class="navbar navbar-inverse navbar-static-top">

  <div class="container">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#">Brand</a>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

        <li><a href="#">Link</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">One more separated link</a></li>

          </ul>

        </li>

      </ul>

      <form class="navbar-form navbar-left">

        <div class="form-group">

          <input type="text" class="form-control" placeholder="Search">

        </div>

        <button type="submit" class="btn btn-default">Submit</button>

      </form>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">Link</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

          </ul>

        </li>

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>

<div class="container" style="height: 1000px">

    ...

</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

Bootstrap_导航条

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>巨幕示例</title>

    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">

</head>

<body>

<div class="container-fluid">

    <div class="jumbotron">

        <h1>Hello, world!</h1>

        <p>...</p>

        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

    </div>

</div>

<div class="jumbotron">

  <h1>Hello, world!</h1>

  <p>...</p>

  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

</div>

</body>

</html>

Bootstrap_巨幕

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>缩略图</title>

    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-xs-6 col-md-3">

            <a href="#" class="thumbnail">

                <img src="../../十月/day1%20国庆作业/img/Bootstrap_i1.png" alt="...">

            </a>

        </div>

        <div class="col-xs-6 col-md-3">

            <a href="#" class="thumbnail">

                <img src="../../十月/day1%20国庆作业/img/Bootstrap_i2.png" alt="...">

            </a>

        </div>

        <div class="col-xs-6 col-md-3">

            <a href="#" class="thumbnail">

                <img src="../../十月/day1%20国庆作业/img/Bootstrap_i3.png" alt="...">

            </a>

        </div>

        <div class="col-xs-6 col-md-3">

            <a href="#" class="thumbnail">

                <img src="../../十月/day1%20国庆作业/img/Bootstrap_i4.png" alt="...">

            </a>

        </div>

    </div>

</div>

<div class="alert alert-warning alert-dismissible" role="alert">

  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

  <strong>Warning!</strong> Better check yourself, you're not looking too good.

</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

Bootstrap_缩略图

 4、模版的使用

1）起步

2）实例精选

3）选定模版，下载

先选择模版然后打开右键另存为

保存类型：网页，全部

下载后就可以用自己的环境中打开进行修改使用

三、JavaScript 效果的引用

如果在下载的Bootstrap的实例中使用到了javascript效果需要引用javascript的js

因为Bootstrap中的js效果都是由jquery写的所以还要引用jquery

<script src="jquery-3.2.1.js"></script>

<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>

jquery需要下载，有兴趣的可以提前了解，在接下来的几篇随笔我会接着跟进jQuery的学习！

JavaScript 插件的使用

以模态框为例注意后面需要modal.js这个文件在哪里下载？

需要哪一部分的效果都可以打勾最后一起下载

当然中间还有很多设置，有兴趣的可以自己研究。

四、其他前端插件分享

1、图标：

[Font Awesome]　　http://fontawesome.io/

2、懒加载：

[jQuery lazy load]　　https://github.com/tuupola/jquery_lazyload

3、提示框

[SweetAlert]　　https://github.com/t4t5/sweetalert

[SweetAlert2]　　https://github.com/limonte/sweetalert2

4、通知

[Toastr]　　http://codeseven.github.io/toastr/

57、Bootstrap中文文档的更多相关文章

  1. Bootstrap 中文文档教程

    Bootstrap 中文文档教程 Bootstrap 中文文档教程 全局样式和grid布局—Bootstrap中文使用指南 全局样式1.要求html5文档类型 Bootstrap使用的css属性和ht ...

  2. 12、Bootstrap中文文档（其它插件分享）

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...

  3. bootstrap中文文档阅读记录

    2017年1月12日20:26:26http://v3.bootcss.com/components/#navbar

  4. Weex中文文档

    这里整理当前已译出的Weex中文文档,如需查阅完整Weex文档,请访问http://alibaba.github.io/weex/doc/ . 同时也欢迎大家参与Weex中文文档翻译 [Guide] ...

  5. jQuery EasyUI API 中文文档

    http://www.cnblogs.com/Philoo/tag/jQuery/ 共2页: 1 2 下一页  jQuery EasyUI API 中文文档 - 树表格(TreeGrid) 风流涕淌 ...

  6. Phoenix综述（史上最全Phoenix中文文档）

    个人主页:http://www.linbingdong.com 简书地址:http://www.jianshu.com/users/6cb45a00b49c/latest_articles 网上关于P ...

  7. Chart.js中文文档-雷达图

    雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...

  8. Knockout中文开发指南(完整版API中文文档) 目录索引

    a, .tree li > span { padding: 4pt; border-radius: 4px; } .tree li a { color:#46cfb0; text-decorat ...

  9. ReactNative官方中文文档0.21

    整理了一份ReactNative0.21中文文档,提供给需要的reactnative爱好者.ReactNative0.21中文文档.chm  百度盘下载:ReactNative0.21中文文档 来源: ...

随机推荐

  1. HTML中document.getElementById()方法的操作

    转自:http://blog.csdn.net/pyffcwj/article/details/7240232/ obj = document.getElementById("cc" ...

  2. 使用设置sa用户登录sql server2008

    今天在net项目中添加数据库过程中出现了小问题,就是使用sql server身份验证没登录成功,经过一番调试,终于解决问题. 使用sa账户登录sql server 2008 的方法步骤如下: 1.首先 ...

  3. Beta版本测试报告以及Beta版本发布说明

    Beta版本测试报告 请根据团队项目中软件的需求文档.功能说明.系统设计和Beta阶段的计划安排,写出软件的测试过程和测试结果,并回答下述问题. 在测试过程中总共发现了多少bug?每个类别的bug分别 ...

  4. 第二次项目冲刺（Beta阶段）5.24

    1.提供当天站立式会议照片一张 会议内容: ①检查前一天的任务情况. ②制定新一轮的任务计划. 2.每个人的工作 (1)工作安排 队员 今日进展 明日安排 王婧 #63Web输出以文件名为标题 #63 ...

  5. Swing-setBorder()用法-入门

    注:本文内容转自:Swing编程边框(Border)的用法总结.内容根据笔者理解稍有整理. 函数说明: public void setBorder(Border border) 设置此组件的边框.Bo ...

  6. 201521123090《Java程序设计》第6周学习总结

    本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖面向对 ...

  7. Git与码云(Git@OSC)入门-如何在实验室和宿舍同步你的代码(1)

    0.几个基本概念 本地仓库:本机上某个存放代码的仓库. 远程仓库:码云服务器上的代码仓库. 重要提醒:当我们在本地操作(新增.删除.修改)文件.目录时,并将其提交(commit),就是提交到了本地仓库 ...

  8. 万物皆对象的JavaScript

    写在前面: 经过前段时间对于H5语言的学习,开始慢慢适应现在的生活节奏和代码语言.从一开始的毫无头绪到现在可以大概地写出部分的网站静态页面,用了两个周的时间.作为一个之前从未接触过计算机语言的初学者来 ...

  9. JavaEE学习路线

    针对很多初识Java者,对如何学习Java.如何学好Java很迷茫,最近刚把JavaEE的东西学完,把我的学习的经验分享给大家,一条适合大多数人的学习路线. 第一部分:Java语言入门阶段 第二部分: ...

  10. Windows下chm转换为html的超简单方法

    摘要:通过调用Windows命令,将chm 文件转换为html 文件 概述:很多程序员朋友都会遇到这样的问题,看一个离线版的帮助文档(chm文件),总会产生一个索引文件(该文件的chw文件), 而且有 ...