Bootstrap(组件)

最新推荐文章于 2024-03-12 16:00:48 发布

世间百态不过尔尔

最新推荐文章于 2024-03-12 16:00:48 发布

阅读量170

点赞数

分类专栏： Bootstrap 文章标签： Bootstrap(组件)

本文链接：https://blog.csdn.net/weixin_44706842/article/details/88562636

版权

Bootstrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

组件：
1、字体图标
在网页中显示某些图标，通过设置相应的类，所有的图标都需要基类和单独的图标类，包含图标的元素需要独立使用，尽量使用span元素；图标类尽量不要包含文字或子元素

2、下拉菜单
.dropdown类用于显示连接列表的，可切换、有上下文的菜单；有一个拥有此类的父元素，包含一个下拉按钮和一个列表
-button需要dropdown-toggle的类，需要设置id属性、需要设置data-toggle属性
-列表需要dropdown-menu类，再通过aria-labelledby属性绑定上面的按钮

3、按钮组
将多个按钮集合成一个控件，使用btn-group和一系列的a或button标记，可以生成一个按钮组的工具条

按钮工具栏
把多组btn-group组合进一个btn-toolbar中，形成工具条

4、列表组
可以通过列表组制作列表清单、垂直导航等效果
-.list-group作为父容器，将ul或ol设置为该类
-.list-group-item 列表项，用在li上

带有提示信息的列表项，可以通过给li添加一个class为badge的元素，显示类似于交表的效果

自定义列表组
在原有列表组的基础上，添加了两个样式
-list-group-item-heading：定义列表项头部
-list-group-item-text  定义列表项的内容

列表项状态
-在list-group-item中，添加active或disabled类、

列表项颜色
-list-group-item-success
-list-group-item-danger
-list-group-item-warning
-list-group-item-info
在list-group-item 的基础上添加这些类，可以让列表项显示不同的颜色

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale = 1">       
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jquery-3.1.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <span class="glyphicon glyphicon-ok"></span>
    <button type="button" class="btn"><span class="glyphicon glyphicon-ok"></span>按钮</button>
    <br>
    <br>
    <!-- 下拉菜单 -->
    <div class="dropdown">
        <!--下拉菜单的按钮  -->
        <button type="button" class="btn dropdown-toggle" id="drop1" data-toggle="dropdown">
            下拉菜单
            <!-- 按钮右侧的小箭头 -->
            <span class="caret"></span>
        </button>

        <!-- 用于显示数据的列表 -->
        <ul class="dropdown-menu" aria-labelledby="drop1">
            <li>123123</li>
            <li>123211</li>
            <li>rferfer</li>
            <li>ferfer</li>
        </ul>
    </div>
    <br><br>
    <!-- 按钮组 -->
    <div class="btn-group">
        <input type="button" value="按钮1" class="btn">
        <input type="button" value="按钮2" class="btn">
        <input type="button" value="按钮3" class="btn">
    </div>
    <br><br>
    <div class="btn-toolbar">
        <div class="btn-group">
            <input type="button" value="按钮1" class="btn">
            <input type="button" value="按钮2" class="btn">
            <input type="button" value="按钮3" class="btn">
        </div>
        <div class="btn-group">
            <input type="button" value="按钮1" class="btn">
            <input type="button" value="按钮2" class="btn">
            <!-- 嵌套下拉菜单 -->
            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" id="drop2">按钮3 <span class="caret"></span></button>
            <ul class="dropdown-menu" aria-labelledby="drop2">
                <li>12312</li>
                <li>123111</li>
                <li>1sewqw</li>
            </ul>
        </div>
    </div>
    <br><br>
    <!-- 列表组 -->
    <ul class="list-group">
        <li class="list-group-item">列表项一</li>
        <li class="list-group-item">列表项二</li>
        <li class="list-group-item">列表项三</li>
        <li class="list-group-item">列表项四</li>
    </ul>

    <!-- 带角标的列表组 -->
    <ul class="list-group">
        <li class="list-group-item">列表项一 <span class="badge" style="background-color: red">12123123</span></li>
        <li class="list-group-item">列表项二</li>
        <li class="list-group-item">列表项三</li>
        <li class="list-group-item">列表项四</li>
    </ul>

    <!-- 自定义列表组 -->
    <div class="list-group">
        <a href="#" class="list-group-item">
            <div class="list-group-item-heading">web前端</div>
            <div class="list-group-item-text">js是世界上最好的语言</div>
        </a>
        <a href="#" class="list-group-item active">
            <div class="list-group-item-heading">java</div>
            <div class="list-group-item-text">java才是世界上最好的语言</div>
        </a>
    </div>
</body>
</html>