Bootstrap

视口

viewport 视口，即浏览器上网页内容可视区域

内容	含义
width = device-width	视口的宽度，大多数手机浏览器视口的宽度为980。 device-width表示采用设备的宽度
initial-scale=1	移动设备上，打开页面时的初始化缩放级别 1表示100%， 5表示500%
minimum-scale=1	移动设备上，页面可以最小缩放的级别
maximun-scale=1	移动设备上，页面可以最大缩放的级别
user-scalable=no	移动设备上，页面禁止缩放一旦设置，则前两个的scale设置无效

使用方式

1	<meta name="viewport" content="width = device-width, minimum-scale=1">

布局容器

任意元素使用了布局容器样式，都会变成一个布局容器，建议使用div作为布局容器


.container类	用于固定宽度并支持响应式布局的容器【特点：居中，两侧留白】
.container-fluid类	用于100%宽度，占据全部视口(viewport)的容器

示例

<div class="container">
    ...
</div>

<div class="container-fluid">
    ...
</div>

栅格系统

基本书写方式

容器=>行=>列在列中书写内容

其中行(row)必须包含在.container或者.container-fluid中
行使用的样式”.row”；列使用样式”.col- # - #”

栅格参数：”col-屏幕尺寸-占用列数”

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

屏幕尺寸简述

尺寸	简述
large:lg	大屏幕一般PC尺寸
medium:md	中等屏幕小PC尺寸
small:sm	小屏幕，ipad尺寸
x small:xs	超小屏幕，智能手机尺寸

注意事项

设置屏幕尺寸的时候如果设置了一个屏幕尺寸，比这个尺寸大的屏幕会继承当前的设置。比这个尺寸小的屏幕会变成一个元素一行。

列偏移

将列元素项向右进行偏移

1
2
3

<div class="col-lg-3 col-lg-offset-5">
    这部分的内容效果是先向右偏移5个单位，再放入3个单位的内容
</div>

列排序

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

列表

list-inline

修改前

<ul>
        <li>牛的蛙</li>
        <li>六的呀</li>
        <li>可以啊</li>
    </ul>

修改后

<ul class="list-inline">
        <li>牛的蛙</li>
        <li>六的呀</li>
        <li>可以啊</li>
    </ul>

list-line

按钮

颜色

buttonStyle

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

尺寸

buttonSize

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

1
2

<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

激活状态

当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的。对于 <a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 <button> 上（包含 aria-pressed="true" 属性)），并通过编程的方式使其处于激活状态。

1 2	<button type="button" class="btn btn-primary btn-lg active">Primary button</button> <button type="button" class="btn btn-default btn-lg active">Button</button>

禁用状态

1 2	<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

导航条

初始代码

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- 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>

具体内容:

首页修改

1
2
3

//首页的修改
<a class="navbar-brand" href="#">Brand</a> //原始代码
<a class="navbar-brand" href="#">首页</a> //修改后的代码

汉堡按钮

<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> 
    <!---sr-only是用来给盲人进行阅读的，最好不要删除-->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
</button>

导航栏主体部分

<!-- 主体部分 -->
<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表单其实是页面里面的搜索区域-->
    <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"><!--提交的按钮字样--></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>

轮播图

帮助手册位置：JavaScript 插件–Carousel

<!--轮播图-->
<div id="lbt1" class="carousel slide" data-ride="carousel" data-interval="1000">
    <!--如果说要使用多个轮播图，那么各自的轮播图id就需要进行修改比如这里的lbt1如果下面也有相应的内容需要同时修改为另一个新名字-->
    <!--这里的data-interval用于设定轮播的速度数值属性为毫秒-->

    <!--小圆点-->
    <ol class="carousel-indicators">
        <!--这里面有多少个li就可以放多少个图片，个数不够可以加-->
        <li data-target="#lbt1" data-slide-to="0" class="active"></li>
        <li data-target="#lbt1" data-slide-to="1"></li>
        <li data-target="#lbt1" data-slide-to="2"></li>
    </ol>
    <!-- 轮播图图片主体部分 -->
    <div class="carousel-inner" role="listbox">
        <!--第一张图片-->
        <div class="item active">
            <!--这里因为设置了active所以默认显示的是这张图片-->
            <img src="..." alt="...">
            <div class="carousel-caption">
                ...
            </div>
        </div>
        <!--第二张图片-->
        <div class="item">
            <img src="..." alt="...">
            <div class="carousel-caption">
                ...
            </div>
        </div>
        ...
    </div>

    <!-- 左右控制按钮 -->
    <a class="left carousel-control" href="#lbt1" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#lbt1" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

1
2
3

//首页的修改
<a class="navbar-brand" href="#">Brand</a> //原始代码
<a class="navbar-brand" href="#">首页</a> //修改后的代码