前端Bootstrap的使用(二)

最新推荐文章于 2021-10-11 10:21:40 发布

「已注销」

最新推荐文章于 2021-10-11 10:21:40 发布

阅读量188

点赞数

分类专栏：前端文章标签： HTML Bootstrap

本文链接：https://blog.csdn.net/qq_36289732/article/details/82717963

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Bootstrap组件 - 下拉菜单

1、.dropdown 控制组件为下拉

2、.dropdown-menu-right 代替 .pull-right右对齐

3、divider 分割线

<!DOCTYPE html>
<html lang="zh-cn">
<html>
<title>Bootstrap测试</title>
<head>
    <meta charset="gdk">
    <link href="bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">按钮
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="https://www.baidu.com">百度</li>
        <li><a href="google.com">谷歌</li>
    </ul>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>

Data-toggle=”dropdown” 为绑定事件

在input前加个$

<div class="input-group">
    <span class="input-group-addon">$<span>
    <input type="text" class="form-control:">
</div>

form-control：百分百宽度

Bootstrap组件 - 导航

1、以一个带有class .nav的无序列表开始

2、.nav-tabs 代表可切换的导航

3、.nav-pills代表胶囊导航

4、.nav-justified使导航垂直

<ul class="nav nav-tabs">
    <li class="active"><a href="www.baidu.com">百度</a></li>
    <li><a href="google.com">谷歌</a></li>
    <li><a href="cxgzs.xyz">失效</a></li>
</ul>

Bootstrap组件 - 分页

1、.pagination在父元素中添加表示分页

2、.page放置在翻页区域

3、.previous把链接向左对齐，.next把链接向右对齐

<div class="pagination">
    <ul>
        <li><a href="#">Prev</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="#">Next</a></li>
    </ul>
</div>

Bootstrap组件 - 进度条

1、progress表示进度条

2、通过状态类修改进度条的颜色

3、.progress-bar-striped使得进度条渐变

Bootstrap组件 - 列表

1、.list-group代表表组

2、.badge代表状态组

3、.active代表选中状态

<ul class="list-group">
    <li class="list-group-item active">
        这是一个列表
        <span class="badge">
            14
        </span>
    </li>
    
    <li class="list-group-item disable">
        这是一个列表
        <span class="badge">
            14
        </span>
    </li>
    
    <li class="list-group-item">
        这是一个列表
        <span class="badge">
            14
        </span>
    </li>
</ul>

Bootstrap组件 - 面板

1、.panel代表面板

2、.panel-body代表面板内容

3、.panel-footer代表面板的注脚

<div class="panel panel-danger">
    <div class="panel-heading">
        弹出层
    </div>
    
    <div class="panel-body">
        这是面板的具体内容
    </div>

    <div class="panel-footer">
        脚注
    </div>
</div>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端Bootstrap的使用(二)

Bootstrap组件 - 下拉菜单1、.dropdown 控制组件为下拉2、.dropdown-menu-right 代替 .pull-right右对齐3、divider 分割线&lt;!DOCTYPE html&gt;&lt;html lang="zh-cn"&gt;&lt;html&gt;&lt;title&gt;Bootstrap测试&lt;/title&gt;&..
复制链接

扫一扫