Bootstrap学习

最新推荐文章于 2024-05-14 00:42:41 发布

原创最新推荐文章于 2024-05-14 00:42:41 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

bootstrap 专栏收录该内容

7 篇文章

订阅专栏

Bootstrap第六章

本章学习要点：

Bootstrap 警告
Bootstrap 进度条
Bootstrap 列表组

Bootstrap 警告

1.您可以通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框

2.可取消的警告（Dismissal Alerts）
创建一个可取消的警告（Dismissal Alert）步骤如下：
通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
同时向上面的 <div> class 添加可选的 .alert-dismissable。
添加一个关闭按钮。

<div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            成功！很好地完成了提交。
        </div>
        <div class="alert alert-info alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            信息！请注意这个信息。
        </div>
        <div class="alert alert-warning alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            警告！请不要提交。
        </div>
        <div class="alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            错误！请进行一些更改。
        </div>

3.警告（Alerts）中的链接
在警告（Alerts）中创建链接的步骤如下：
通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
使用 .alert-link 实体类来快速提供带有匹配颜色的链接。

Bootstrap 进度条

1.默认的进度条
创建一个基本的进度条的步骤如下：
添加一个带有 class .progress 的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style=”60%”; 表示进度条在 60%。
的位置。

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

2.交替的进度条
创建不同样式的进度条的步骤如下：
添加一个带有 class .progress 的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
添加一个带有百分比表示的宽度的 style 属性，例如 style=”60%”; 表示进度条在 60% 的位置。

<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 90%;">
        <span class="sr-only">90% 完成（成功）</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 30%;">
        <span class="sr-only">30% 完成（信息）</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 20%;">
        <span class="sr-only">20% 完成（警告）</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 10%;">
        <span class="sr-only">10% 完成（危险）</span>
    </div>
</div>

3.条纹的进度条
创建一个条纹的进度条的步骤如下：
添加一个带有 class .progress 和 .progress-striped 的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
添加一个带有百分比表示的宽度的 style 属性，例如 style=”60%”; 表示进度条在 60% 的位置。

4.条纹的进度条
创建一个条纹的进度条的步骤如下：
添加一个带有 class .progress 和 .progress-striped 的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
添加一个带有百分比表示的宽度的 style 属性，例如 style=”60%”; 表示进度条在 60% 的位置。

5.堆叠的进度条
您甚至可以堆叠多个进度条。把多个进度条放在相同的 .progress 中即可实现堆叠，如下面的实例所示：

<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
    <div class="progress-bar progress-bar-info" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 30%;">
        <span class="sr-only">30% 完成（信息）</span>
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 20%;">
        <span class="sr-only">20% 完成（警告）</span>
    </div>
</div>

Bootstrap 列表组

列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：
向元素 <ul> 添加 class .list-group。也可用于div标签
向 <li> 添加 class .list-group-item。
向其中添加徽章<span class="badge">新</span>会自动右对齐

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 向列表组添加链接</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<a href="#" class="list-group-item active">
    免费域名注册
</a>
<a href="#" class="list-group-item">  <span class="badge">新</span>24*7 支持</a>
<a href="#" class="list-group-item">免费 Window 空间托管</a>
<a href="#" class="list-group-item">图像的数量</a>
<a href="#" class="list-group-item">每年更新成本</a>


</body>
</html>