bootstrap快速入门

1、Bootstrap 介绍

Bootstrap 是目前最受欢迎的前端框架，涵盖了页面开发的大部分css布局功能，js的特效功能，使得 Web 开发更加快捷。Bootstrap中先定义好了样式和特效，如果需要直接通过class和其他的属性进行调用。

2、导入

Bootstrap的js导入一定要导入jQuery，并且jQuery放在bootstrap.min.js导入之前，因为Bootstrap 的 JavaScript 插件需要引入 jQuery

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

3、网格系统

网格系统是bootstrap推出的一种快速的页面布局方案。他可以随着设备或视口大小的增加而适当地扩展到 12 列。通俗的讲就是将整个页面的宽度分为12份，开发者只需要设置同一行中每一个元素是多少宽度即可快速实现页面布局。

<div class="container">
    <div class="row">
        <div class="col-md-2">
                嘤嘤嘤
        </div>
        <div class="col-md-4">
                嘤嘤嘤
        </div>
        <div class="col-md-8">
                嘤嘤嘤
        </div>
    </div>
    <div class="row">...</div>
</div>

<!--
	.container：固定宽度，如果浏览器比他宽就居中显示
	.container-fluid：100%宽度
	元素必须放置在.container内，才能获得相应的样式。
	.row：一行
	网格系统一行被分为12份，如果所有元素没有占满12份也可以布局，如果超出，超出部分另起一行布局，另起的一行还在本元素中。
	.col-xx-xx：设置在哪种设备中元素在一行中所占的宽度
-->

4、导航栏

导航栏是在应用或网站中作为导航页头的响应式基础组件，用户通过点击导航栏可以快速跳到相应页面。

<div class="container-fluid">
        <div class="row">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div>
                        <a class="navbar-brand" href="#">小天才电话手表专营店</a>
                    </div>
                    <div>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">登录</a></li>
                        <li><a href="#">退出</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<!--
	navbar：导航
    navbar-default：默认导航样式
    navbar-brand：导航的标识部分，通常写在左边
    nav：设置ul为导航选项
    navbar-nav：保持一致（选项在同一行）
    navbar-right：右边布局
-->

5、标签式导航菜单

点击选项即可在当前页切换不同面板，从而查看相应的内容

<ul class="nav nav-tabs col-md-8 pull-right">
    <li class="active">
        <a href="#information" aria-controls="information" role="tab" data-toggle="tab">
            个人信息
        </a>
    </li>
    <li>
        <a href="#order" aria-controls="order" role="tab" data-toggle="tab">
            订单信息
        </a>
    </li>
    <li>
        <a href="#address" aria-controls="address" role="tab" data-toggle="tab">
            地址管理
        </a>
    </li>
</ul>
<div class="tab-content col-md-8 pull-right">
    <div role="tabpanel" class="tab-pane fade in active" id="information">
        个人信息
    </div>
    <div role="tabpanel" class="tab-pane fade" id="order">
        订单信息
    </div>
    <div role="tabpanel" class="tab-pane fade" id="address">
        地址信息
    </div>
</div>

<!--
	nav：设置ul为导航选项
	nav-tabs：保持一致（选项在同一行）
	pull-right：右对齐
	active：选项默认选中
	in active：内容默认选中，需要和选项相对应
	tab-pane：标签内容

	aria-controls：设置控制的是哪个id的元素
	data-toggle：指以什么事件触发
-->

6、面板

<div class="col-md-4">
        <div class="panel panel-primary">
        <div class="panel-heading">
            最近浏览
        </div>
        <div class="panel-body">
            <div>123</div>
            <div>嘤嘤嘤</div>
        </div>
    </div>
</div>
<!--
	panel：面板
	panel-primary：面板默认样式
	panel-heading：面板标题
	panel-body：面板内容
-->

7、表单

<div class="container">
    <from class="form-horizontal">
        <div class="input-group">
        	<input type="text" class="form-control">
            <span class="input-group-btn">
                <button class="btn btn-primary">
                    百度一下
                </button>
            </span>
        </div>
        <br>
        <div class="form-group">
            <lable class="col-md-4 control-label">用户名：</lable>
            <div class="col-md-6">
                <input class="form-control">
            </div>
        </div>
        <div class="form-group">
            <lable class="col-md-4 control-label">性别：</lable>
            <div class="col-md-6">
                <input class="form-control">
            </div>
        </div>
    </from>
</div>

<!--
	form-horizontal：横向布局
	input-group：输入框内容
	input-group-btn：输入框按钮（同行）
    form-group：表单内容
    control-label：输入框提示标题
-->

8、表格

<div class="container">
    <table class="table table-bordered table-hover col-md-8 table-striped">
        <caption>学生信息</caption>
        <thead>
            <tr>
            <td>学号</th>
            <td>姓名</td>
        </tr>
        </thead>
        <tbody>
            <tr class="success">
            <td>学号</th>
            <td>姓名</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
            <td>学号</th>
            <td>姓名</td>
            </tr>
        </tfoot>
    </table>
</div>

<!--
	caption：表格标题
	thead：表头
	tbody：表的内容
	tfoot：表尾
	table-bordered：显示表格边框
    table-hover：鼠标经过的效果
    table-striped：设置奇数行有背景
    tr的背景颜色；
    	active
        warning
        danger
        info
        success
-->

9、列表

9.1 列表

<div class="container">
    <ul class="list-group">  <!--列表组-->
        <li class="list-group-item active">蔬菜</li>  <!-- 列表内容-->
        <li class="list-group-item">黄瓜</li>
        <li class="list-group-item">豆角</li>
    </ul>
</div>

9.2 分页

<div class="container">
    <ul class="pagination">  <!--分页-->
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">尾页</a></li>
    </ul>
</div>

10、缩略图

实现在网页中快速布局图片，可以根据网格系统的宽度来设置图片的大小。

<div class="row">
    <div class="col-md-3">
        <a href="#" class="thumbnail">
            <img src="images/1.jpg">
        </a>
    </div>
</div>

11、模态框

覆盖在父窗体上的子窗体，显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

<div class="container">
    <button class="btn btn-primary" data-target="#myModal" data-toggle="modal" >
        触发按钮
    </button>
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>是否删除商品</h4>
                </div>
                <div class="modal-body">
                    <h5>点击确定删除商品，请谨慎选择。</h5>
                </div>
                <div class="modal-footer">
                    <botton type="button" class="btn btn-primary" data-dismiss="modal">取消</botton>
                    <botton type="button" class="btn btn-danger">确定</botton>
                </div>
            </div>
        </div>
    </div>
</div>

12、轮播图

<div class="container">
    <div id="picture" class="carousel slide" data-ride="carousel">
        <!--小点部分-->
        <ol class="carousel-indicators">
            <li data-target="#picture" data-slide-to="0" class="active"></li>
            <li data-target="#picture" data-slide-to="1"></li>
            <li data-target="#picture" data-slide-to="2"></li>
        </ol>
        <!--图片部分-->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="images/1.jpg">
            </div>
            <div class="item">
                <img src="images/2.jpg">
            </div>
            <div class="item">
                <img src="images/3.jpg">
            </div>
        </div>
        <!--控制部分部分-->
        <a href="#picture" class="left carousel-control" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">上一张</span>
        </a>
        <a href="#picture" class="right carousel-control" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">下一张</span>
        </a>
    </div>
</div>

13、图标

图标的使用需要fonts（字体）文件，若未引用这则会导致有些图标不能正常显示，引入目录如下：

<span class="glyphicon glyphicon-eur"></span>
<span class="glyphicon glyphicon-sta"></span>
<span class="glyphicon glyphicon-trash"></span>
<span class="glyphicon glyphicon-align-center"></span>
<span class="glyphicon glyphicon-chevron-right"></span>

官方图标网址：https://v3.bootcss.com/components/

14、徽章

主要用于突出显示新的或未读的项。

<botton class="btn btn-primary">消息
	<span class="badge">3</span>
</botton>