Bootstrap4（2）

最新推荐文章于 2024-10-04 22:04:56 发布
最新推荐文章于 2024-10-04 22:04:56 发布
阅读量195 收藏
点赞数
分类专栏： Bootstrap4 文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxcWh/article/details/120461719
版权

1.Bootstrap4 进度条

进度条可以显示用户任务的完成过程

创建一个基本的进度条的步骤如下：

1.添加一个带有 .progress 类的 <div>。

2.接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。

3.添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>实例</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      
    </head>
    <body>
      
        <div class="container-fluid  ">
        <h1>基本进度条</h1>
            <p>要创建一个默认的进度条，可以在容器元素上添加.progress类，在子元素上添加progress-bar类，
                并设置进度条进度情况</p>
                <div class="progress">
                    <div class="progress-bar" style="width: 70%;"></div>
                </div>
        </div>
        <h1>进度条高度</h1>
        <p>进度条高度默认为16px。我们可以使用css的height属性来修改它</p>
        <div class="progress" style="height: 10px;">
            <div class="progress-bar" style="width: 55%;"></div>

        </div>
        <h1>进度条标签</h1>
        <p>可以在进度条内添加文本，如进度条百分比</p>
        <div class="progress" >
            <div class="progress-bar" style="width: 57%;">57%</div>
        </div>
        <h1>不同颜色的进度条</h1>
        <p>默认情况下为进度条为蓝色，Bootstrap4还提供了以下颜色的进度条</p>
         <div class="progress">
            <div class="progress-bar bg-info" style="width: 30%;">30</div>
        </div>

        <br>

        <div class="progress">
            <div class="progress-bar bg-success" style="width:40%"></div>
        </div>

        <br>

        <div class="progress">
            <div class="progress-bar bg-info" style="width:50%"></div>
        </div>

          <br>

        <div class="progress">
            <div class="progress-bar bg-warning" style="width:60%"></div>
        </div> 

          <br>

        <div class="progress">
            <div class="progress-bar bg-danger" style="width:70%"></div>
        </div>
        <h1>可以使用 progress-bar-striped类来设置条纹进度条</h1>
        <p>条纹进度条</p>
        <div class="progress">
            <div class="progress-bar-striped bg-danger  " style="width: 50%;"></div>
        </div>
        <h1>动画进度条</h1>
        <p>使用 progress-bar-animated类可以为进度条添加动画</p>
        <div class="progress">
            <div class="progress-bar  progress-bar-striped  progress-bar-animated" style="width: 40%;"></div>
        <br>
        </div>
        <h1>混合色彩进度条</h1>
        <p>进度条可以设置多种颜色</p>
        <div class="progress">
        <div class="progress-bar bg-succrss" style="width: 40%;"> Free Space</div>
        <div class="progress-bar bg-warning" style="width: 10%;"> Warning</div>
        <div class="progress-bar bg-danger" style="width: 20%;"> Danger</div>
    </div>
        </div>
    </body>
</html>

2.Bootstrap4分页

网页开过过程，如果碰到内容过多，一般会做分页处理。

Bootstrap4可以简单的实现分页效果。

要创建一个基本的分页可以在<ul>元素上添加 pagination类。然后在<li>元素上添加page-item类

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>实例</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      
    </head>
    <body>
      
        <div class="container-fluid  ">
            <h1>分页</h1>
            <p>要创建一个基本的分页可以在ul元素上添加 pagination类然后在li元素上添加page-item类</p>
            <ul class="pagination">
                <li class="page-item"> <a href="#" class="page-link">Previous</a></li>
                <li class="page-item"> <a href="#" class="page-link">1</a></li>
                <li class="page-item"> <a href="#" class="page-link">2</a></li>
                <li class="page-item"> <a href="#" class="page-link">3</a></li>
                <li class="page-item"> <a href="#" class="page-link">Next</a></li>
            </ul>
            <h1>当前页页码状态</h1>
            <p>当前页可以使用active类来高亮显示</p>
            <ul class="pagination">
                <li class="page-item active"> <a href="#" class="page-link">Previous</a></li>
                <li class="page-item"> <a href="#" class="page-link">1</a></li>
                <li class="page-item"> <a href="#" class="page-link">2</a></li>
                <li class="page-item"> <a href="#" class="page-link">3</a></li>
                <li class="page-item"> <a href="#" class="page-link">Next</a></li>
            </ul>
            <h1>disabled类可以设置分页链接不可点击</h1>
            <ul class="pagination">
                <li class="page-item disabled"  > <a href="#" class="page-link">Previous</a></li>
                <li class="page-item"> <a href="#" class="page-link">1</a></li>
                <li class="page-item"> <a href="#" class="page-link">2</a></li>
                <li class="page-item"> <a href="#" class="page-link">3</a></li>
                <li class="page-item"> <a href="#" class="page-link">Next</a></li>
            </ul>
            <h1>pagination-lg类设置大字体的分页条目，pagination-sm类设置小字体分页条目</h1>
            
            <ul class="pagination  pagination-lg">
                <li class="page-item"> <a href="#" class="page-link">Previous</a></li>
                <li class="page-item"> <a href="#" class="page-link">1</a></li>
                <li class="page-item"> <a href="#" class="page-link">2</a></li>
                <li class="page-item"> <a href="#" class="page-link">3</a></li>
                <li class="page-item"> <a href="#" class="page-link">Next</a></li>
            </ul>

            <ul class="pagination  pagination-sm">
                <li class="page-item"> <a href="#" class="page-link">Previous</a></li>
                <li class="page-item"> <a href="#" class="page-link">1</a></li>
                <li class="page-item"> <a href="#" class="page-link">2</a></li>
                <li class="page-item"> <a href="#" class="page-link">3</a></li>
                <li class="page-item"> <a href="#" class="page-link">Next</a></li>
            </ul>
        </div>
    </body>
</html>

 3.Bootstrap4列表组

要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>实例</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      
    </head>
    <body>
        <div class="container-fluid  ">
         <h1>Bootstrap4 列表组</h1>
         <h3>基础列表组</h3>
         <ul class="list-group">
             <li class="list-group-item"> First item</li>
             <li class="list-group-item">Second item</li>
             <li class="list-group-item">Third item</li>
         </ul>

         <h1>通过添加active类来设置激活状态的列表项</h1>
         <ul class="list-group">
            <li class="list-group-item active"> First item</li>
            <li class="list-group-item">Second item</li>
            <li class="list-group-item">Third item</li>
        </ul>

        <h1>disabled 类用于设置禁用的列表项</h1>
        <ul class="list-group">
            <li class="list-group-item  disabled">First item</li>
            <li class="list-group-item">Second item</li>
            <li class="list-group-item">Third item</li>
        </ul>

        <h1>要创建一个链接的列表项，可以将ul替换为div。a替换li。如果你向鼠标悬停显示灰色背景
            就添加list-group-item-action类
        </h1>
        <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action">First item</a>
            <a href="#" class="list-group-item list-group-item-action">FSecond item</a>
            <a href="#" class="list-group-item list-group-item-action">Third item</a>
        </div>

        <h1>列表项目的颜色可以通过以下列来设置</h1>
        <p>.list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light</p>
        <p>多种颜色列表项</p>
        <ul class="list-group">
            <li class="list-group-item list-group-item-success list-group-item-action">成功列表项</li>
            <li class="list-group-item list-group-item-secondary list-group-item-action">次要列表项</li>
            <li class="list-group-item list-group-item-info list-group-item-action">信息列表项</li>
            <li class="list-group-item list-group-item-warning list-group-item-action">警告列表项</li>
            <li class="list-group-item list-group-item-danger list-group-item-action">危险列表项</li>
            <li class="list-group-item list-group-item-primary list-group-item-action">主要列表项</li>
            <li class="list-group-item list-group-item-dark list-group-item-action">深灰色列表项</li>
            <li class="list-group-item list-group-item-light list-group-item-action">浅色列表项</li>
        
        </ul>
        <h1>链接的多种颜色列表项</h1>
        <div class="list-group">
            <a href="#" class="list-group-item list-group-action">激活列表项</a>
            <a href="#" class="list-group-item list-group-item-success">成功列表项</a>
            <a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
            <a href="#" class="list-group-item list-group-item-info">信息列表项</a>
            <a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
            <a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
            <a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
            <a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
            <a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
        
        </div>
        </div>
    </body>
</html>

4.Bootstrap4 卡片

我们可以通过Bootstrap 4的 card与 card-body类来创建一个简单的卡片

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>简单卡片</h2>
        <div class="card">
            <div class="card-body">卡片</div>
        </div>
    </div>
</body>
</html>

​

头部和底部

例如：

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>简单卡片</h2>
        <div class="card">
            <div class="card-header">头部</div>
            <div class="card-body">内容</div>
            <div class="card-footer">底部</div>
        </div>
    </div>
</body>
</html>

​

多种颜色卡片

Bootstrap 4 提供了多种卡片的背景颜色类：

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light

例如：

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>多种颜色卡片</h2>
        <div class="card">
            <div class="card-body">内容</div>
        </div>
        <div class="card bg-danger text-white">
            <div class="card-body">内容</div>
        </div>
        <div class="card bg-info text-white">
            <div class="card-body">内容</div>
        </div>
    </div>
</body>
</html>

​

标题、文本和链接

我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内

容。 .card-link 类用于给链接设置颜色

例如：

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>标题、文本和链接</h2>
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">card-text</p>
                <a href="#" class="card-link">card-link3</a>
                <a href="#" class="card-link">card-link4</a>
            </div>
        </div>
    </div>
</body>
</html>

​

图片卡片

我们可以给 <img> 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方

来设置图片卡片）

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>图片卡片</h2>
        <p>图片在头部</p>
        <div class="card" style="width: 400px;">
            <img class="card-img-top" src="../img/1.jpg" alt="card image" style="width: 100%;">
            <div class="card-body">
                <h4 class="card-title">John Doe</h4>
                <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
                <a href="#" class="btn btn-primary">See Profile</a>
            </div>
        </div>
        <br>
        <p>图片在底部</p>
        <div class="card" style="width: 400px;">
            <div class="card-body">
                <h4 class="card-title">John Doe</h4>
                <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
                <a href="#" class="btn btn-primary">See Profile</a>
            </div>
            <img class="card-img-bottom" src="../img/1.jpg" alt="card image" style="width: 100%;">  
        </div>
    </div>
</body>
</html>

​

如果图片要设置为背景，可以使用 .card-img-overlay 类

例如：

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!--<h2>简单卡片</h2>
        <div class="card">
            <div class="card-header">头部</div>
            <div class="card-body">内容</div>
            <div class="card-footer">底部</div>
        </div>
        <h2>多种颜色卡片</h2>
        <div class="card">
            <div class="card-body">内容</div>
        </div>
        <div class="card bg-danger text-white">
            <div class="card-body">内容</div>
        </div>
        <div class="card bg-info text-white">
            <div class="card-body">内容</div>
        </div>
        <h2>标题、文本和链接</h2>
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">card-text</p>
                <a href="#" class="card-link">card-link3</a>
                <a href="#" class="card-link">card-link4</a>
            </div>
        </div>
        <h2>图片卡片</h2>
        <p>图片在头部</p>
        <div class="card" style="width: 400px;">
            <img class="card-img-top" src="../img/1.jpg" alt="card image" style="width: 100%;">
            <div class="card-body">
                <h4 class="card-title">John Doe</h4>
                <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
                <a href="#" class="btn btn-primary">See Profile</a>
            </div>
        </div>
        <br>
        <p>图片在底部</p>
        <div class="card" style="width: 400px;">
            <div class="card-body">
                <h4 class="card-title">John Doe</h4>
                <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
                <a href="#" class="btn btn-primary">See Profile</a>
            </div>
            <img class="card-img-bottom" src="../img/1.jpg" alt="card image" style="width: 100%;">  
        </div>-->
        <h2>文字覆盖图片</h2>
        <p>如果图片要设置为背景，可以使用 .card-img-overlay 类</p>
        <div class="card img-fluid" style="width: 500px;">
            <img class="card-img-top" src="../img/1.jpg" alt="card image" style="width: 100%;">
            <div class="card-img-overlay">
                <h4 class="card-title">John Doe</h4>
                <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
                <a href="#" class="btn btn-primary">See Profile</a>
            </div>
        </div>
    </div>
</body>
</html>

​

5.Bootstrap4 下拉菜单

Bootstrap4 下拉菜单依赖于 popper.min.js

下拉菜单是可切换的，是以列表格式显示链接的上下文菜单

例如：

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>下拉菜单</h2>
        <p>.dropdown 类用来指定一个下拉菜单</p>
        <p>.dropdown-menu 类来设置实际下拉菜单</p>
        <p>我们可以使用一个按钮或链接来打开下拉菜单， 
           按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性
        </p> 
       <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown button</button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">link 1</a>
                <a class="dropdown-item" href="#">link 2</a>
                <a class="dropdown-item" href="#">link 3</a>
            </div>
        </div>
    </div>
</body>
</html>

​

dropdown 类用来指定一个下拉菜单

我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-

toggle="dropdown" 属性

<div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添

加 .dropdown-item 类

我们也可以在 <a> 标签中使用

例如：

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container"> 
       <div class="dropdown">
            <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#" role="button" id="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button</a>
            <div class="dropdown-menu" aria-labelledby="dropdown">
                <a class="dropdown-item" href="#">link 1</a>
                <a class="dropdown-item" href="#">link 2</a>
                <a class="dropdown-item" href="#">link 3</a>
            </div>
        </div>
    </div>
</body>
</html>

​

下拉菜单中的分割线

dropdown-divider 类用于在下拉菜单中创建一个水平的分割线

例如：

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container"> 
        <h2>下拉菜单</h2>
        <p>.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线：</p>
       <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown button</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">link 1</a>
                <a class="dropdown-item" href="#">link 2</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">link 3</a>
            </div>
        </div>
    </div>
</body>
</html>

​

下拉菜单中的标题

.dropdown-header 类用于在下拉菜单中添加标题

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container"> 
        <h2>下拉菜单</h2>
        <p>.dropdown-header 类用于在下拉菜单中添加标题</p>
       <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown button</a>
            <div class="dropdown-menu">
                <h5 class="dropdown-header">dropdown-header</h5>
                <a class="dropdown-item" href="#">link 1</a>
                <a class="dropdown-item" href="#">link 2</a>
                <h5 class="dropdown-header">dropdown-header</h5>
                <a class="dropdown-item" href="#">link 3</a>
                <a class="dropdown-item" href="#">link 4</a>
                <a class="dropdown-item" href="#">link 5</a>
            </div>
        </div>
    </div>
</body>
</html>

​

下拉菜单中的可用项与禁用项

.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)

如果要禁用下拉菜单的选项，可以使用.disabled 类

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container"> 
        <h2>下拉菜单</h2>
        <p>.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)</p>
        <p>如果要禁用下拉菜单的选项，可以使用.disabled 类</p>
       <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown button</button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#" active>link 1</a>
                <a class="dropdown-item" href="#">link 2</a>
                <a class="dropdown-item active" href="#">link 4</a>
                <a class="dropdown-item disabled" href="#">link 5</a>
            </div>
        </div>
    </div>
</body>
</html>

​

下拉菜单的定位

如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-

right 类

例如：

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container"> 
        <h2>下拉菜单</h2>
        <p>如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类。</p>
       <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown button</button>
            <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" href="#" active>link 1</a>
                <a class="dropdown-item" href="#">link 2</a>
                <a class="dropdown-item active" href="#">link 4</a>
                <a class="dropdown-item disabled" href="#">link 5</a>
            </div>
        </div>
    </div>
</body>
</html>

​

下拉菜单弹出方向设置

下拉菜单弹出方向默认为向下，当然我们也可以设置不同的方向。

如果你希望下拉菜单向右弹出，可以在 div 元素上添加 "dropright" 类

如果你希望下拉菜单向左弹出，可以在 div 元素上添加 "dropleft" 类

如果你希望上拉菜单向上弹出，可以在 div 元素上添加 "dropup" 类

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container"> 
        <h2>下拉菜单</h2>
        <p> .dropright 类用于设置下拉菜单向右弹出：</p><br>
       <div class=" btn-group dropright">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropright</button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#" active>link 1</a>
                <a class="dropdown-item" href="#">link 2</a>
                <a class="dropdown-item " href="#">link 4</a>
                <a class="dropdown-item " href="#">link 5</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">link 6</a>
            </div>
        </div>
        <div class=" btn-group dropright">
            <button type="button" class="btn btn-primary">Split dropright</button>
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#" >link 1</a>
                <a class="dropdown-item" href="#">link 2</a>
                <a class="dropdown-item " href="#">link 4</a>
                <a class="dropdown-item " href="#">link 5</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">link 6</a>
            </div>
        </div>
    </div>
</body>
</html>

​

按钮中设置下拉菜单

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container"> 
        <h2>按钮中的下拉菜单</h2>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">primary</button>
            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#"> link 1</a>
                <a class="dropdown-item" href="#"> link 2</a>
            </div>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-success">success</button>
            <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#"> link 1</a>
                <a class="dropdown-item" href="#"> link 2</a>
            </div>
        </div>
    </div>
</body>
</html>

​

6.Bootstrap4 折叠

Bootstrap4 折叠可以很容易的实现内容的显示与隐藏

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>折叠</h2>
        <p>点击按钮内容会再显示与隐藏之间切换</p>
        <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">简单折叠</button>
        <div class="collapse" id="demo">1</div>
    </div>
</body>

​

.collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。

控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。 data-

target="#id" 属性是对应折叠的内容 (<div id="demo">)。

注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性

例如：

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!--<h2>折叠</h2>
        <p>点击按钮内容会再显示与隐藏之间切换</p>
        <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">简单折叠</button>
        <div class="collapse" id="demo">1</div>-->
        <h2>折叠</h2>
        <a href="#demo" class="btn btn-primary" data-toggle="collapse" >简单折叠</a>
        <div class="collapse" id="demo">1</div>
    </div>
</body>

​

默认情况下折叠的内容是隐藏的，可以添加 .show 类让内容默认显示

例如：

​
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!--<h2>折叠</h2>
        <p>点击按钮内容会再显示与隐藏之间切换</p>
        <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">简单折叠</button>
        <div class="collapse" id="demo">1</div>
        <h2>折叠</h2>
        <a href="#demo" class="btn btn-primary" data-toggle="collapse" >简单折叠</a>
        <div class="collapse" id="demo">1</div>-->
        <h2>简单的折叠</h2>
        <p> 
            默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示
            .show 类让内容默认显示
        </p>
        <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">简单的折叠</button>
        <div id="demo" class="collapse show">1</div>
      </div>      
    </div>
</body>

​

山i
关注
专栏目录
Learning Bootstrap 4 2nd Edition.pdf
11-17
Unearth the potential of Bootstrap 4 to create highly responsive and beautiful websites using modern web techniques
Bootstrap4——学习总结
m0_63348818的博客
11-20 1402
关于bootstrap的学习 Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签， <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> Bootstrap 4 需要一个容器元素来
4 Bootstrap4组件——卡片
weixin_45884768的博客
03-17 3310
4 Bootstrap4组件——卡片1 卡片内容1.1 卡片标题1.2卡片主体1.2.1 文本1.2.2 超链接1.3 图片1.4 列表组1.4.1 基本结构1.4.2 列表标题1.4.3 列表页眉页脚2 响应式卡片2.1 使用栅格系统2.2 使用全局样式2.3 自定义样式 .card卡片组件是BootStrap 4新增的一组重要样式，它是一个灵活的、可扩展的内容管理器，可以包含图片、列表、文本、...
Bootstrap 4（三）
weixin_55685975的博客
04-24 3438
Bootstrap 4 列表组 大部分基础列表组都是无序的。 要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类 <ul class="list-group"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item&lt
bootstrap 组件之卡片总结
twinkle的博客
05-24 1863
card 在bootstrap3.x的版本是没有， 在bootstrap4.x里面才会有 card支持自动响应式 使用类名card 来标记为card 使用方法： <div class="container"> <div class="row"> <div class="col-lg-4"> <div class="card"> // 图片需要和card
bootstrap4　常用类名（仅供自己参考）
qq_31876111的博客
10-21 1432
1、容器和网格系统 容器 container 固定宽度，不同尺寸固定了不同的宽度 container-fluid 100%宽度 栅格系统 col-//<576px col-sm- //>=576px col-md- //>=768px col-lg- //>=992px col-xl- //>=1200px ２、字体颜色及背景颜色 字体 text-muted 柔和 t...
select2-bootstrap4-theme：Bootstrap4的Select2 v4主题
01-29
select2-bootstrap4-主题 Bootstrap4的 v4主题（与boostrap 4.0.0+兼容） 现场演示 :backhand_index_pointing_right: 安装 CDN < link rel =" stylesheet " href =" /path/to/select2.css " > < link ...
bootstrap4.zip
08-02
这个"bootstrap4.zip"压缩包包含了一系列关键组件，使得开发者能够快速构建美观且功能丰富的界面。以下是压缩包内各部分的详细说明： **CSS 文件** Bootstrap 的 CSS 文件是框架的核心，提供了预定义的样式和布局...
bootstrap4后台模板
05-02
在描述中提到的"五套bootstrap4响应式后台经典模板"，这意味着你将获得五个精心设计的、基于Bootstrap 4的后台界面模板。这些模板已经预先进行了响应式布局优化，确保在不同设备（如桌面、平板和手机）上都能良好...
yii2-bootstrap4：Yii 2 Bootstrap 4扩展
01-31
"yiisoft/yii2-bootstrap4": "~2.0.6" 到composer.json文件的require部分。 用法 例如，视图文件中的以下单行代码将呈现Bootstrap Progress插件： <?= yii\bootstrap4\ Progress :: widget ([ 'percent' => 60 ,...
html中的文本标签(含标签的实现案例)
2301_76862031的博客
10-01 997
html中常用的标签h,p,hn,hr,br,font,time,mark,cite,特殊字符标签，图像标签
HTML详解
gopher9511的博客
10-04 1055
HTML 基础 HTML 标题 HTML 段落 HTML 链接 HTML 图片 HTML 元素 HTML 注释 HTML 属性 HTML 文本格式化 HTML 头部 HTML css HTML 表格 HTML 列表 HTML 自定义列表 HTML 区块 HTML 表单 HTML 框架 HTML 颜色 HTML 脚本 HTML 事件 HTML 实体 HTML url HTML5 新元素 新元素 新元素 新元素 新元素 新元素 新元素 新表单元素 新元素 uotput 新属性 新的语义和结构元
复习HTML(基础）
m0_74124657的博客
10-01 1305
目录HTML含义 HTML作用HTML的常用元素元素的特点元素的分类1 是否嵌套关系2 是否独占一行块元素：独占一行 行内元素：共享一行 行内元素与块级元素的转换3是否有结束标签 常用标签1 标题标签：有六级 我们用h1 ~h6 表示2 段落标签：内容3 图像标签:< img src=" 图片路径" > 是为了添加图片使用的4 视频标签： 添加视频使用5 列表5.1 无序列表5.2 有序列表6 超链接 ： 内容 1 访问同目录下的网页2 访问外部 网页3 访问本地网页7 标签 ， 8 表
【移动端】Viewport 视口
最新发布
小秀的博客
10-04 1177
（视口）是指浏览器中用户可见的那部分网页内容的区域，简单来说，它是用户当前看到的网页的“窗口”区域。在不同的设备上，Viewport 的大小会有所不同。
基于HTML、CSS和JavaScript的滚动数字显示效果，类似于老式计数器或电子表上的数字滚动效果
2201_76060199的博客
09-29 1288
这段代码创建了一个数字滚动显示效果，用户可以通过输入框输入金额，或点击按钮生成随机数字，金额数字会以滚动的方式显示。CSS负责布局和样式，JavaScript负责动画效果和逻辑处理。代码中多次使用了相同的IDcounter，这在实际开发中是不推荐的，ID应该是唯一的，这里可能是为了简化示例而重复使用。
【前端开发入门】html快速入门
qbbmnnnnnn的博客
09-29 1220
本篇介绍html的相关内容，包含文档流的概念以及块级元素和行内元素等。同时强调了有关代码编写习惯性问题。
XHTML 简介
wjs2024的博客
10-04 460
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
前端编程艺术（1）---HTML
lys20221113242的博客
09-30 1233
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它描述了一个网站的结构骨架，使得浏览器能够展示具有特定格式的文本、链接、图片和其他内容。：主体元素，包含可见的页面内容，如文本、图片、视频、游戏、可播放的音频等。：头部元素，包含元信息，如字符集、页面标题、样式表链接、脚本链接等。标签：HTML标签用于标记文本，以便浏览器知道如何渲染它们。属性：提供关于元素的额外信息，通常在开始标签中规定。：根元素，包裹所有其他HTML元素。
HTML:相关概念以及标签
2301_80418172的博客
10-04 1078
我们平时使用电脑和手机都是离不开网站和网页的,那么什么是网页呢?什么又是网站呢?网页就是网站的一页,网页就是一个后缀为html的文件,通过浏览器读取然后就是我们所看到的各中有画面的网页了;不信?我们在一个网页中右键点击打开网页源代码,你就会发现源代码就是就是使用的html语言写的;网站就是指在因特网上根据一定的规则,使用HTML等制作的作用于展示特定内容相关的网页集合;网页是构成网站的基本元素,它通常是由图片,链接,文字,声音,视频等元素组成。
使用Bootstrap 4和Angular 2构建现代Web应用
"Web开发与Bootstrap 4和Angular 2结合，用于构建具有前瞻性的、引人注目的web应用程序的实战指南" 在Web开发领域，Bootstrap 4和Angular 2是两个非常强大的工具，它们各自提供了不同的优势。Bootstrap 4是世界上最...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值