Bootstrap 小记（2）（组件）

最新推荐文章于 2021-08-20 14:41:24 发布

DanielZhou1

最新推荐文章于 2021-08-20 14:41:24 发布

阅读量146

点赞数

本文链接：https://blog.csdn.net/weixin_42042250/article/details/95905952

版权

1 字体图标

用法：放在一对不包含任何文本的 span 标签内，一般要放在其他标签例如button标签中使用。添加 aria-hidden = 'true' 使它不被读出来，也可以设置 aria-label = 'a' 使它读出来 a 样式类名去 https://v3.bootcss.com/components/ 查找

2 下拉菜单

.dropup 向上弹出 .dropdown 向下弹出

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <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 class=disabled><a href="#">Separated link</a></li>
    </ul>
</div>

3 按钮组

① 设置 .btn-group 作为按钮组，添加role属性 role="group" ：按钮组合 role="toolbar" ：工具栏

<div class="btn-group" role="group" aria-label="fx">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>

② 可以设置按钮组的大小 btn-group-lg btn-group-sm ,当设置工具栏时，可以在里面添加其他组件

<div class="toolbar">
    <div class="btn-group btn-group-lg" role="group" aria-label="fx">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
    <div class="btn-group btn-group-sm" role="group" aria-label="paly control">
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-volume-off"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-headphones"></span></button>
    </div>
    <div class="btn-group btn-group-sm" role="group" aria-label="paly control">
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <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>
        </div>
    </div>
</div>

4 输入框组

.input-group 输入框组类名 .form-control 框的类名 .input-group-addon span的类名

输入框组可以和其他组件一起使用

<div class="input-group input-group-lg">
    <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-asterisk"></span></span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

5 基本导航：标签式和胶囊式

用无序列表实现 .active 点击的变换要借助js 实现

标签式: .nav .nav-tabs

胶囊式: .nav .nav-pills 胶囊垂直式: .nav .nav-pills .nav-stacked

<ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li class="dropdown">
        <a class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            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>
        </ul>
    </li>
    <li role="presentation" class="disabled"><a href="#">Messages</a></li>
</ul>

6 面包屑导航

无序列表实现 .breadcrumb

<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ol>

7 分页

最外层包裹 nav 主要起来语义化的作用，里面用了无序列表

默认分页： .pagination 翻页： .pager

<!--默认分页-->
<nav>
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><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="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
<!--翻页-->
<nav>
    <ul class="pager">
        <li><a href="#">上一页</a></li>
        <li><a href="#">下一页</a></li>
    </ul>
</nav>

8 标签

.label

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

标签是随着外层文本的变化而变化，放在H1标签里面就会变大

9 徽章徽章里面可以放入字体图标，也可以把其放在其他元素当中使用，例如 button 按钮中

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
    Messages <span class="badge"><span class="glyphicon glyphicon-asterisk"></span></span>
</button>

10 巨幕

.jumbotron

一般有一个标题，一个解释，一个按钮

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

11 页头元素

<div class="page-header">
    <h1>Example page header <small>Subtext for header</small></h1>
</div>

12 缩略图组件

.thumbnail .caption

<div class="container">
    <div class="row">
        <div class="col-lg-4">
            <div class="thumbnail" href="">
                <img src="../banner.jpg" alt="...">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="thumbnail" href="">
                <img src="../banner.jpg" alt="...">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="thumbnail" href="">
                <img src="../banner.jpg" alt="...">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

13 警告框

① 普通警告框

.alert .alert-success

    <div class="alert alert-success" role="alert">...</div>
    <div class="alert alert-info" role="alert">...</div>
    <div class="alert alert-warning" role="alert">...</div>
    <div class="alert alert-danger" role="alert">...</div>

② 带有关闭按钮的警告框

.alert .alert-warning .alert-dismissible data-dismiss="alert"

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

14 导航条

navbar-default ：默认样式 navbar-fixed-top：固定头部 data-target=".navbar-collapse1" ：这边注意有一点小红点

navbar-right：右侧对齐 .icon-bar 导航在屏幕小收起时会显示的小横条 .navbar-brand：导航文本

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/" class="navbar-brand">前端学院</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/">首页</a></li>
                <li><a href="/">论坛</a></li>
                <li><a href="/">前端开发</a></li>
                <li><a href="/">最新课程</a></li>
                <li><a href="/">移动APP</a></li>
                <li><a href="/">联系我们</a></li>
            </ul>
        </div>
    </div>
</nav>

15 面板

可以带表格或者列表 ..panel-body（边框效果）可以去掉

<div class="panel panel-default">
                <div class="panel-heading">网站统计数据</div>
                <div class="panel-body">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>统计项目</th>
                            <th>今日</th>
                            <th>昨日</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th scope="row">注册会员</th>
                            <td>200</td>
                            <td>400</td>
                        </tr>
                        <tr>
                            <th scope="row">登录会员</th>
                            <td>4100</td>
                            <td>5112</td>
                        </tr>
                        <tr>
                            <th scope="row">今日发帖</th>
                            <td>1540</td>
                            <td>4511</td>
                        </tr>
                        <tr>
                            <th scope="row">转载次数</th>
                            <td>150</td>
                            <td>110</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

DanielZhou1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 小记（2）（组件）

1 字体图标用法：放在一对不包含任何文本的 span 标签内，一般要放在其他标签例如button标签中使用。添加 aria-hidden = 'true' 使它不被读出来，也可以设置 aria-label = 'a' 使它读出来 a 样式类名去https://v3.bootcss.com/components/查找2 下拉菜单.dropup 向上弹出 .dropdown...
复制链接

扫一扫