Bootstrap基本组件【Slikeの后花园】

Bootstrap基本组件

发表于 2019-09-01 | 更新于 2021-07-28

BootStrap

Bootstrap基本组件

BootStrap基本组件

前言

Bootstrap框架是一个响应式框架，其中封装了很多常用的组件，如：图标、下拉框、导航条等。不需要程序员再去自己做样式，可以提高程序员搭建的速度。在4X版本以上的Bootstrap引入的方法存在差异

小图标

图标是一个优秀网站不可缺少的一组元素，小图标的点缀可以使网站瞬间提升一个档次。Bootstrap给我们提供了250多种小图标，可以作用在内联元素上，给网页增加更多活力。

小图标用法

<span class="glyphicon glyphicon-home"></span>

注意：
所有的icon图标都是以glyphicon-开头的，因为这些小图标都是由http://glyphicons.com/网站提供的，使用的时候必须同时使用两个样式，即glyphicon和glyphicon-*开头。

图标类不能喝其他组件之间联合使用，它们不能再同一个元素上与其他类同时存在，应该创建一个嵌套的span元素，并将图标应用到这个span上。
只对内容为空的元素起作用。
对引入的图标位置有规定，假如所有图标字体全部位于../fonts/目录内，相对于预编译版CSS文件的应该是同级目录才有效果。
引用图标时需要导入下载好的Bootstrap压缩包中的fonts整个文件夹中的文件

下拉菜单

网页中经常会需要上下文菜单或者隐藏/展示菜单项，Bootstrap默认提供了通用的菜单显示效果，而且各种交互状态下的菜单展示需要和JavaScript的Dropdown插件配合才能使用。

基本下拉菜单

基本下拉菜单的用法即将下拉菜单触发器和下拉菜单包裹在dropdown里，或者另外声明一个position:relative的元素。

<div class="dropdown open">
    <button class="btn btn-defalut" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li class="active"><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li class="divider"></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>

分离式下拉菜单

<div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <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><a href="#">Separated link</a></li>
    </ul>
</div>

输入框

我们需要输入框组件(Input group)和文字或者小icon组合在一起使用(称为addon)。

输入框组件是通过在文本输入框input前面、后面或者两边加上文字或按钮。使用输入框组件也很简单，只需要在容器上应用input-group样式，然后对需要在input前后显示的个性元素上应用input-group-addon样式即可。

基本用法

<div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="Username">
    </div>
    <br />
    <div class="input-group">
        <input type="text" class="form-control" placeholder="请输入要搜索的内容">
        <span class="input-group-addon">百度一下</span>
    </div>

尺寸大小

输入框组件也可以设置大小，在input-group-addon样式容器上添加相应尺寸类，不需要为输入框组件中每个元素重复添加控制尺寸的类。
```
<div class="input-group input-group-lg"></div>
<div class="input-group input-group-sm"></div>
```

按钮作为addon

输入框组件上addon支持普通的button以addon的形式出现。为了避免冲突，为btn样式单独设置了一个input-group-btn样式，用它来替换input-group-addon作为新的addon容器。

<div class="input-group">
    <input type="text" class="form-control" placeholder="请输入要搜索的内容">
    <span class="input-group-btn">
        <button class="btn btn-primary" type="button">百度一下</button>
    </span>
</div>

注意：

请避免在select上元素上使用，因为Webkit浏览器不完全支持input-group组件特性。
不要直接将input-group和form-group混合使用。因为input-group是一个独立组件。
不要将表单组件或栅格列类直接输入框混合使用，而是将输入框组件嵌套到表单组件或栅格相关元素的内部。

导航和导航条

导航

导航(Nav)是一个网站最重要的组成部分，可以便于用户查找网站所提供的各项功能服务。Bootstrap中导航组件都依赖一个nav类，状态也是公共的。就像btn使用一样，需要特殊的样式，在添加相应的类即可。

1.选项卡导航

选项卡导航时最常用的一种导航方式，尤其是在多内容编辑的时候，通常都需要选项卡进行分组显示。当前高亮菜单单项使用active样式，选项卡式导航使用nav-tabs类

<ul class="nav nav-tabs">
    <li calss="active"><a href="#">主页</a></li>
    <li><a href="#">微博</a></li>
    <li><a href="#">图书</a></li>
    <li><a href="#">关于我们</a></li>
</ul>

2.胶囊式选项卡导航

<ul class="nav nav-pills">
    <li calss="active"><a href="#">主页</a></li>
    <li><a href="#">微博</a></li>
    <li><a href="#">图书</a></li>
    <li><a href="#">关于我们</a></li>
</ul>

3.自适应导航

<ul class="nav nav-tabs nav-justified">
    <li calss="active"><a href="#">主页</a></li>
    <li><a href="#">微博</a></li>
    <li><a href="#">图书</a></li>
    <li><a href="#">关于我们</a></li>
</ul>

4.二级导航

<ul class="nav nav-pills">
    <li calss="active"><a href="#">主页</a></li>
    <li><a href="#">微博</a></li>
    <li><a href="#">图书</a></li>
    <li><a href="#">个人</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">其他
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">收藏</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系卖家</a></li>
            <li><a href="#">退换货</a></li>
        </ul>
    </li>
</ul>

导航条

1.基础导航条

基础导航条时在普通导航的基础上改进实现的，不过实现原理却不像想象中那么简单。首先在普通导航的ul元素上应用navbar-nav样式。然后在负极容器上使用navbar样式。

<nav class="navbar navbar-defalut" role="navigation">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">LOGO</a>
    </div>
    <ul class="nav navbar-nav">
        <li calss="active"><a href="#">主页</a></li>
        <li><a href="#">微博</a></li>
        <li><a href="#">图书</a></li>
    </ul>
</nav>

2.导航条中的表单

<nav class="navbar navbar-defalut" role="navigation">
    <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-primary">搜索</button>
    </form>
</nav>

3.导航条中的按钮(文本、链接)

<nav class="navbar navbar-defalut" role="navigation">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">LOGO</a>
    </div>
    <div class="nav navbar-nav">
        <button class="btn btn-defalut navbar-btn">button</button>
        <button class="btn btn-primary navbar-btn">button</button>
        <button class="btn btn-success navbar-btn">button</button>

        <p class="navbar-text">text</p>

        <a href="#" class="navbar-link">link</a>
    </div>
</nav>

4.顶部固定或底部固定

<nav class="navbar navbar-defalut navbar-fixed-top"></nav>
<nav class="navbar navbar-defalut navbar-fixed-bottom"></nav>

5.响应式导航条

一个导航条默认情况是全屏100%显示，所以通常都会有很多菜单项内容，以至于在小屏幕下会有可能显示不完全，或排版很乱。大屏幕浏览器下导航条的所有内容并非都需要在小屏幕浏览上显示有些内容是可以省略或是被隐藏起来。根据需求，Bootstrap提供了响应式导航条。

 <nav class="navbar navbar-inverse">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-targer="navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">LOGO</a>
    </div>
    <div class="collapse navbar-collapse navbar-left">
        <ul class="nav navbar-nav">
            <li calss="active"><a href="#">主页</a></li>
            <li><a href="#">微博</a></li>
            <li><a href="#">图书</a></li>
        </ul>
    </div>
    <form class="navber-form navbar-right" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-primary">搜索</button>
    </form>
</nav>

缩略图

使用thumbnail样式，可以使图片、文字或是视频展示的更加漂亮

<div class="row">
    <div class="col-md-2 col-xs-6">
        <a class="thumbnail" href="#">
            <img src="image/img1.jpg" alt=""/>
            <div class="caption">
                <h3>左耳</h3>
                <p>放肆青春掀全民追忆</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">播放</a>
                    <a href="#" class="btn btn-defalut" role="button">下载</a>
                </p>
        </a>
    </div>
</div>

媒体对象

媒体对象是一个抽象的样式，用来构建不同类型的组件，这些组件都具有在文本内左对齐或右对齐的图片。

<div class="media">
    <div class="media-left">
        <a href="#">
            <img class="media-object" src="image/pic.jpg" alt="">
        </a>
    </div>
    <div class="media-body">
        <h4 class="media-heading">谁在制造下跌，散户何去何从</h4>
        <p>大盘分时不断在筑底过程中下跌。</p>
        <small>5分钟/股市</small>
        <small>评论|分享</small>
    </div>
</div>

列表组

灵活又强大的组件，不仅能用于显示一组简单元素，还能用负责的定制内容。大部分列表都是使用ul/li实现。然后给它添加特定样式。

<ul class="list-group">
        <li class="list-group-item active">同桌的你
            <span class="badge">12</span>
        </li>
        <li class="list-group-item list-group-item-success">花样年华
            <span class="badge">5</span>
        </li>
        <li class="list-group-item">甜蜜蜜</li>
        <li class="list-group-item">向天再借五百年</li>
    </ul>

分页导航

当网页内容很多的时候会使用分页显示。Bootstrap提供了两种分页组件：带多个页面的组件、只有上一页和下一页的翻页组件

默认分页

<ul class="pagination">
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&laquo;</a></li>
</ul>

翻页

<ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
</ul>

<ul class="pager">
    <li class="previous disabled"><a href="#">上一页</a></li>
    <li calss="next"><a href="#">下一页</a></li>
</ul>

本文作者: Slike-V

本文链接: http://Slike-v.github.io/2019/09/01/Bootstrap基本组件/