Bootstrap学习二

原创已于 2024-02-08 13:43:10 修改 · 872 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

python篇

于 2024-01-05 10:02:44 首次发布

Bootstrap学习二

前言

三、Bootstrap组件

3.1. 图标菜单按钮组件

3.1.1. 字体图标

图标类不能和其它组件直接联合使用。应该创建一个嵌套的 < span > 标签，并将图标类应用到这个 < span > 标签上。

可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方:

<button type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-trash"></span> Delete
</button>
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-send"></span> Send
</button>

3.1.2. 下拉菜单

下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来


<!--下拉菜单-->
<div class="dropdown">
    <button class="btn btn-default" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">信息</a>
        </li>
        <li>
            <a href="#">文件</a>
        </li>

    </ul>
</div>

按钮和菜单需要包裹在 .dropdown 的容器里;
作为被点击的元素按钮需要设置 data-toggle=“dropdown” ;
菜单部分设置 class=“dropdown-menu” 才能自动隐藏并添加固定样式;
设置 class="caret"表示箭头，可上可下。

其他设置：

<!--设置向上触发-->
<div class="dropup">
<!--菜单项居右对齐(默认值是 dropdown-menu-left)-->
<ul class="dropdown-menu dropdown-menu-right">
<!--设置菜单的标题-->
<li class="dropdown-header">网站导航</li>
<!-- 设置菜单的分割线-->
<li class="divider"></li>
<!--设置菜单的禁用项-->
<li class="disabled"><a href="#">产品</a></li>
<!--菜单默认显示-->
<div class="dropdown open">

3.1.3. 按钮组

单个按钮的运用有时候并不能满足我们的需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。

下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的类：

在这里插入图片描述

下面的实例演示了上表中讨论到的 .btn-group 类的使用：

<div class="btn-group">
    <button type="button" class="btn btn-default"> 左 </button>
    <button type="button" class="btn btn-default"> 中 </button>
    <button type="button" class="btn btn-default"> 右 </button>
</div>

示例：

<div class="btn-group">
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-step-backward"></span>
    </button>
</div>

按钮工具栏

将按钮组分组排列在一起以下实例演示了 btn-toolbar 类并设置了按钮组大小:


<!--按钮工具栏-->
<div class="btn-toolbar">
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">按钮1</button>
        <button type="button" class="btn btn-default">按钮2</button>
        <button type="button" class="btn btn-default">按钮3</button>
    </div>
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default">按钮4</button>
        <button type="button" class="btn btn-default">按钮5</button>
        <button type="button" class="btn btn-default">按钮6</button>

    </div>
</div>

嵌套。嵌套一个分组，须把 .btn-group 放入另一个 .btn-group 中。

设置按钮组垂直排列只需把水平分组的btn-group类名换成btn-group-vertical即可。如下所示：

<div class="btn-group-vertical">

两端对齐

<div class="btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default"> 左 </button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default"> 右 </button>
    </div>
</div>

按钮组里面的每个按钮平分整个容器宽度。例如，如果你按钮组里面有五个按钮，那么每个按钮是20%的宽度。

按钮式下拉菜单

如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。


<!--按钮式下拉菜单-->
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉菜单 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">信息</a>
        </li>
        <li>
            <a href="#">文件</a>
        </li>

    </ul>
</div>

向上弹出式：

<div class="btn-group dropup">

3.2. 输入框

输入框组扩展自表单控件

使用输入框组，我们可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

向.form-control添加前缀或后缀元素的步骤如下：

把前缀或后缀元素放在一个带有.input-group类的 < div > 中；
在相同的 < div > 内，在.input-group-addon类的 < span > 内放置额外的内容；
把该 < span > 放置在 < input > 元素的前面或者后面。

下面是输入框组的一些具体实例:


<!-- 输入框组-->
<!--1.在两侧添加文字-->
<!--可以通过向 .input-group 添加相对表单大小的类（比如 .input-group-lg、input-group-sm）来改变输入框组的大小-->
<div class="input-group input-group-lg">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00</span>
</div>

<!-- 2.左侧使用单选框-->
<!--复选框同理,将 input 元素的 type 值由 radio 改为 checkbox 即可-->
<div class="input-group">
    <span class="input-group-addon">
        <input type="radio">
    </span>
    <input type="text" class="form-control">
</div>

<!--3.右侧使用按钮-->
<!--当我们为输入框组添加按钮时,我们就不是添加 .input-group-addon 类，而需要使用.input-group-btn 来包裹按钮元素-->
<div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default"> 按钮 </button>
    </span>
</div>

<!--4.左侧使用按钮式下拉菜单或分裂式按钮下拉菜单-->
<!--在输入框组中添加带有下拉菜单的按钮，只需要在一个 .input-group-btn类中包裹按钮和下拉菜单即可-->
<div class="input-group">
    <div class="input-group-btn">
        Button and dropdown menu
    </div>
    <input type="text" class="form-control">
</div>

3.3. 导航组件

Bootstrap 提供了一组导航组件，用于实现 Web 页面的栏目操作。Bootstrap 中的导航组件都依赖同一个.nav类。

.nav样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如nav-tabs、nav-pills之类

下面是基本导航标签页的实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<!--基本导航标签页-->
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#">首页</a>
    </li>
    <li>
        <a href="#">资讯</a>
    </li>
    <li>
        <a href="#">产品</a>
    </li>
</ul>
</body>
</html>

3.3.1. 胶囊式（pills）导航

胶囊式（pills）导航其实现方法和nav-tabs类似，同样的结构，只需要把类名nav-tabs换成nav-pills即可

在实际运用当中，除了水平导航之外，还有垂直导航。制作垂直堆叠导航只需要在nav-pills的基础上添加一个nav-stacked类名即可：

<ul class="nav nav-pills nav-stacked">

3.3.2. 带下拉菜单的导航

制作带下拉菜单的导航只需

将 li 当作父容器；
使用类名dropdown；
在 li 中嵌套另一个列表 ul。

<ul class="nav nav-tabs nav-justified">
    <li class="active">
        <a href="#">首页</a>
    </li>
    <li>
        <a href="#">资讯</a>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </a>
        <ul class="dropdown-menu">
            <li class="disabled">
                <a href="#">菜单一</a>
            </li>
            <li>
                <a href="#">菜单二</a>
            </li>
        </ul>
    </li>
</ul>

nav-justified：屏幕宽度大于 768px 时，设置导航两端对齐。
在 li 元素内添加 .disabled 类可实现禁用导航中的项目。效果为链接为灰色且没有鼠标悬停。

3.3.3. 面包屑导航

面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。

以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。
Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb 类的无序列表。

<ul class="breadcrumb">
    <li>
        <a href="#">首页</a>
    </li>
    <li>
        <a href="#">课程列表</a>
    </li>
    <li class="active"> Bootstrap 3 </li>
</ul>

3.3.4. 导航条

导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂得多。
导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航）、表单以及表单和导航一起结合等多种形式。

在制作一个基础导航条时，主要分以下几步：

首先在制作导航的列表(< ul class=‘nav’>)上添加类名 navbar-nav；
在列表外部添加一个容器（nav），并且使用类名 navbar 和 navbar-default。

为了创建一个带有黑色背景白色文本的反色调导航条，只需要简单地向 .navbar 类添加 .navbar-inverse 类即可，如下所示：

<nav class="navbar navbar-inverse"> ... </nav>

示例：

<nav class="navbar navbar-inverse">
    <ul class="nav navbar-nav">
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">资讯</a>
        </li>
        <li>
            <a href="#">产品</a>
        </li>
    </ul>
</nav>

3.3.5. 带表单的导航条

导航条中使用表单只要在 navbar 容器中放置一个带有 navbar-form 类名的表单,如下：

<nav class="navbar navbar-inverse">
<!-- navbar-left 类让表单左浮动，更好实现对齐 -->

<form class="navbar-form navbar-left">

    <div class="input-group">

        <input type="text" class="form-control">

        <span class="input-group-btn">

            <button type="submit" class="btn btn-default"> 提交 </button>

        </span>

    </div>

</form>    
</nav>

3.3.6. 导航条中的按钮、文本和链接

框架提供了三种其他样式：

导航条中的按钮navbar-btn
导航条中的文本navbar-text
导航条中的普通链接navbar-link

导航中使用按钮：

<button class="btn btn-default navbar-btn">按钮</button>

导航中使用一段文本：

<p class="navbar-text">我是一段文本</p>

非导航链接，一般需要置入文本区域内：

<a href="#" class="navbar-link">非导航链接</a>

3.3.7. 固定导航条

如果我们希望将导航条固定在浏览器顶部或底部，Bootstrap 框架提供了两种固定导航条的方式：

将导航固定在顶部，下面的内容会自动上移

<nav class="navbar navbar-default navbar-fixed-top">

将导航固定在底部

<nav class="navbar navbar-default navbar-fixed-bottom">

3.4. 分页标签徽章组件

分页组件可以提供带有展示页面的功能。

3.4.1. 默认分页（Pagination）

分页（Pagination）是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。
下表列出了 Bootstrap 提供的处理分页的类:

在这里插入图片描述

3.4.2. 翻页（Pager）

我们可以通过翻页（Pager）来实现上一页和下一页的简单翻页功能。

与分页链接一样，翻页也是无序列表。
在默认的翻页中，链接居中对齐。

下表列出了 Bootstrap 处理翻页的类:

在这里插入图片描述


<!--默认分页并设置大的分页-->
<ul class="pagination pagination-lg">
    <li>
        <a href="#">«</a>
    </li>
    <li class="active">
        <a href="#">1</a>
    </li>
    <li class="disabled">
        <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="#">»</a>
    </li>
</ul>

<!--并设置对齐翻页链接-->
<ul class="pager">
    <li class="previous">
        <a href="#">上一页</a>
    </li>
    <li class="next">
        <a href="#">下一页</a>
    </li>
</ul>

3.4.3. 标签

标签可用于计数、提示或页面上其他的标记显示。

使用.label类来显示标签，如下实例所示：

<!--在文本后面带上标签-->
<h6>标签 <span class="label label-primary">new</span></h6>
<h5>标签 <span class="label label-success">new</span></h5>
<h4>标签 <span class="label label-info">new</span></h4>
<h3>标签 <span class="label label-warning">new</span></h3>
<h2>标签 <span class="label label-danger">new</span></h2>

3.4.4. 徽章

徽章与标签相似，主要的区别在于徽章的边角更加圆滑。

我们给链接、导航等元素嵌套 < span class=“badge” > 元素，可以很醒目的展示新的或未读的信息条目。

以下是徽章的一些具体实例:

未读信息数量徽章

给链接元素嵌套徽章展示未读信息条数:

<a href="#">信息 <span class="badge">10</span></a>

按钮中使用徽章

<button class="btn btn-success"> 提交 <span class="badge">3</span>
</button>

激活状态自动适配色调

我们可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 < span class=“badge” > 来激活链接

<ul class="nav nav-pills">
    <li class="active">
        <a href="#">首页
        <span class="badge">2</span></a>
    </li>
    <li>
        <a href="#">资讯</a>
    </li>
</ul>

3.5. 巨幕页头缩略图和警告框组件

学习一下 Bootstrap 的四个组件功能：巨幕组件、页头组件、缩略图组件和警告框组件。

3.5.1. 巨幕

我们先来看一下巨幕(Jumbotron) 组件,巨幕组件主要是展示网站的关键性区域。具体实例如下所示:


<!--在固定范围内，有圆角-->
<div class="container">

    <div class="jumbotron">
        <h2>W3Cschool</h2>
        <p> 这是一个学习性的网站！ </p>
        <p>
            <a href="#" class="btn btn-default">更多内容</a>
        </p>
    </div>
</div>


<!-- 100%全屏，没有圆角 -->
<div class="jumbotron">
    <div class="container">
        <h2>W3Cschool</h2>
        <p> 这是一个学习性的网站！ </p>
        <p>
            <a href="#" class="btn btn-default">更多内容</a>
        </p>
    </div>
</div>

3.5.2. 页头

当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页头这个组件就显得特别有用。

页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。

如果需使用页头（Page Header），请把标题放置在带有 .page-header 类的 < div > 中,如下实例所示:

<div class="page-header">
    <h1>大标题 <small>小标题</small></h1>
</div>

3.5.3. 缩略图

通过缩略图组件扩展 Bootstrap 的栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。

将图像放在带有 .thumbnail 类的 < a > 标签中即可创建缩略图,具体实例如下：

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3 col-sm-4">
            <a class="thumbnail">
                <img src="img/pic.png" alt="">
            </a>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4">
            <a class="thumbnail">
                <img src="img/pic.png" alt="">
            </a>
        </div>
    </div>
</div>

添加自定义的内容。
现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体如下:

<div class="thumbnail">
    <img src="img/pic.png" alt="">
        <div class="caption">
            <h3>图文并茂</h3>
            <p> 这是一个图片结合文字的缩略图 </p>
            <p>
               <a href="#" class="btn btn-default">按钮</a>
            </p>
         </div>
</div>

3.5.4. 警告框

警告框组件是一组预定义消息。
将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert类是必须要设置的，另外 bootstrap 还提供了有特殊意义的4个类,代表不同的警告信息。

基本警告框实例:

<div class="alert alert-success">成功</div>
<div class="alert alert-info">消息</div>
<div class="alert alert-warning">警告</div>
<div class="alert alert-danger">危险</div>

带关闭的警告框(为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮):

<div class="alert alert-success"> Bootstrap <button type="button" class="close" data-dismiss="alert">
        <span>×</span>
    </button>
</div>

警告框中的链接(用.alert-link工具类，可以为链接设置与当前警告框相符的颜色)

<div class="alert alert-success"> Bootstrap，请到官网 <a href="http://www.bootcss.com/" class="alert-link">下载</a>
</div>

3.6. 列表组和面板组件

主要学习一下 Bootstrap 的两个组件功能：列表组组件、面板组件。

3.6.1. 列表组

创建一个基本的列表组的步骤如下：

向< ul > 添加.list-group类
向< li > 添加.list-group-item类

基本实例：

<ul class="list-group">
    <li class="list-group-item"> 1.这是起始 </li>
    <li class="list-group-item"> 2.这是第二条数据 </li>
    <li class="list-group-item"> 3.这是末尾 </li>
</ul>

给列表组加入徽章组件，它会自动被放在右边，具体做法如下：

<li class="list-group-item"> 1.这是起始 <span class="badge">10</span>
</li>

列表组 – 定制内容

向列表组添加链接和按钮
用 < a > 标签代替 < li > 标签可以组成一个全部是链接的列表组，具体实例如下：

<a href="#" class="list-group-item">W3Cschool</a>

注意：我们需要将 ul 标签替换为 div 标签

列表组中的元素也可以直接就是按钮，例子如下：

<button class="list-group-item">...</button>

总之，列表组中的每个元素都可以是任何 HTML 内容，如下所示：


<div class="list-group">
    <a href="#" class="list-group-item active">
    <h4>内容标题</h4>
    <p class="list-group-item-text"> 这里是相关内容详情！ </p>
    </a>
    <a href="#" class="list-group-item">
    <h4>内容标题</h4>
    <p class="list-group-item-text"> 这里是相关内容详情！ </p>
    </a>
    <a href="#" class="list-group-item">
    <h4>内容标题</h4>
    <p class="list-group-item-text"> 这里是相关内容详情！ </p>
    </a>
</div>

3.6.2. 面板组件

面板（Panels）组件就是一个存放内容的容器组件。

下表列出了 bootstrap 提供的一些面板相关的类:

在这里插入图片描述

为了在面板中创建一个无边框的表格，我们可以在面板中使用 .table 类。

<div class="panel panel-default">
    <div class="panel-heading"> 表格标题 </div>
    <div class="panel-body">
        <p> 这里是表格标题的详细内容！ </p>
    </div>
    <table class="table">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        ......
    </table>
</div>

过以下步骤我们可以在任何面板中包含列表组:

通过在 < div > 元素中添加 .panel 和 .panel-default 类来创建面板；
在面板中添加列表组。


<!--带列表组的面板-->
<div class="panel panel-default">
    <div class="panel-heading">面板标题</div>
    <div class="panel-body">
        <p>这是一个基本的面板内容</p>
    </div>
    <ul class="list-group">
        <li class="list-group-item"> 1.这里是首页 </li>

        <li class="list-group-item"> 2.这里是第二个项目 </li>

        <li class="list-group-item"> 3.这里是第三个项目 </li>

    </ul>
</div>

3.7. 进度条媒体对象和Well组件

学习一下 Bootstrap 的三个组件功能：进度条组件、媒体对象组件、Well 组件

3.7.1. 进度条

进度条组件为当前工作流程或动作提供实时反馈

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

添加一个带有.progress 类的 < div >。
在上面的 < div > 内，添加一个带有 .progress-bar 类的空的 < div >。
添加一个带有百分比表示的宽度的 style 属性。

<!--基本进度条-->
<div class="progress">
    <div class="progress-bar" style="width: 60%;"> 60% </div>
</div>

进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果

<div class="progress">
    <div class="progress-bar progress-bar-info" style="min-width: 20px; width: 2%;">2%</div>
</div>

条纹状进度条

<div class="progress">
    <div class="progress-bar progress-bar-success
    progress-bar-striped" style="min-width:20px;width:60%"> 60% </div>
</div>

3.7.2. 媒体对象

媒体对象可以包含图片、视频或音频等媒体，以达到对象和文本组合显示的样式效果。

基本实例

<div class="media">
    <div class="media-left">
    <img src="img/media.jpg" alt="" class="media-object">
    </div>
    <div class="media-body">
    <h4 class="media-heading">标题</h4>
    <p>针对美国财长称将于近期来华磋商消息,中国商务部新闻发言人高峰16日在新闻发布会上称,中方不掌握美方来华计划  </p>
    </div>
</div>

如果想让媒体对象在右边,把包含 .media-body类的 div 与包含媒体对象的 div 互换位置,且把 media-left 类换成 media-right

媒体对象列表

<ul class="media-list">
<li class="media">
    <div class="media-left">
    <a href="#"><img class="media-object" src="..." alt="..."></a>
    </div>
    <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    </div>
</li>
......
</ul>

3.7.3. Well组件

Well 组件可以实现简单的嵌入效果。

为了创建 Well，只需要简单地把内容放在带有.well类的 < div > 中即可。

如下：

<div class="well"> Bootstrap </div>

我们可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。

通过这两种可选修饰类，可以控制此组件的内补（padding）和圆角的设置。

<div class="well well-lg"> 我在更大的 well 中 </div>
<div class="well well-sm"> 我在更小的 well 中 </div>

总结

以上只是一些笔记，细致学习主要还是看官方文档。

2023–12-28

标签

#bootstrap #学习 #网络

Bootstrap学习二

文章目录

前言

三、Bootstrap组件

3.1. 图标菜单按钮组件

3.1.1. 字体图标

3.1.2. 下拉菜单

3.1.3. 按钮组

3.2. 输入框

3.3. 导航组件

3.3.1. 胶囊式（pills）导航

3.3.2. 带下拉菜单的导航

3.3.3. 面包屑导航

3.3.4. 导航条

3.3.5. 带表单的导航条

3.3.6. 导航条中的按钮、文本和链接

3.3.7. 固定导航条

3.4. 分页标签徽章组件

3.4.1. 默认分页（Pagination）

3.4.2. 翻页（Pager）

3.4.3. 标签

3.4.4. 徽章

3.5. 巨幕页头缩略图和警告框组件

3.5.1. 巨幕

3.5.2. 页头

3.5.3. 缩略图

3.5.4. 警告框

3.6. 列表组和面板组件

3.6.1. 列表组

3.6.2. 面板组件

3.7. 进度条媒体对象和Well组件

3.7.1. 进度条

3.7.2. 媒体对象

3.7.3. Well组件

总结