Bootstrap学习（二）——Bootstrap 布局组件

最新推荐文章于 2024-06-03 20:31:46 发布
最新推荐文章于 2024-06-03 20:31:46 发布
阅读量5.9k 收藏 10
点赞数 2
分类专栏： h5知识学习 文章标签： bootstrap 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/benhuo931115/article/details/52240493
版权

Bootstrap 布局组件

Bootstrap 字体图标(Glyphicons)

什么是字体图标？

字体图标是在 Web 项目中使用的图标字体。

获取字体图标

Bootstrap 3.x 版本，在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：

  • glyphicons-halflings-regular.eot
  • glyphicons-halflings-regular.svg
  • glyphicons-halflings-regular.ttf
  • glyphicons-halflings-regular.woff

字体图标列表

http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

用法

如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

<span class="glyphicon glyphicon-search"></span>

Bootstrap 下拉菜单（Dropdowns）

如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可

<div class="dropdown">
   <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
      data-toggle="dropdown">
      主题
      <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">Java</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">
            数据通信/网络
         </a>
      </li>
      <li role="presentation" class="divider"></li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
      </li>
   </ul>
</div>

按钮上拉菜单

菜单也可以往上拉伸的，只需要简单地向父 .btn-group 容器添加 .dropup 即可

选项

对齐

  • 通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单

标题

  • 使用 class dropdown-header 向下拉菜单的标签区域添加标题

    <li role="presentation" class="dropdown-header">下拉菜单标题</li>

Bootstrap 按钮组

按钮组允许多个按钮被堆叠在同一行上

<div class="btn-group">
  <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>

.btn-group-vertical : 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。

.btn-toolbar:该 class 有助于把几组 <div class=”btn-group”> 结合到一个 <div class=”btn-toolbar”> 中，一般获得更复杂的组件。

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
  <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">
  <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-lg, .btn-group-sm, .btn-group-xs:这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。

嵌套

在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group

<div class="btn-group">
  <button type="button" class="btn btn-default">按钮 1</button>
  <button type="button" class="btn btn-default">按钮 2</button>

  <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="#">下拉链接 1</a></li>
      <li><a href="#">下拉链接 2</a></li>
    </ul>
  </div>
</div>

Bootstrap 输入框组

通过向输入域添加前缀和后缀的内容，可以向用户输入添加公共的元素

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

  • 把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
  • 接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。

  • 把该 <span> 放置在 <input> 元素的前面或者后面。

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

输入框组的大小

通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm、input-group-xs）来改变输入框组的大小

复选框和单选插件

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

按钮插件

可以把按钮作为输入框组的前缀或者后缀元素，使用 class .input-group-btn 来包裹按钮

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">
            Go!
        </button>
    </span>
    <input type="text" class="form-control">
</div>

带有下拉菜单的按钮

在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可

<div class="input-group">
    <div class="input-group-btn">
        <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>
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
        </ul>
    </div><!-- /btn-group -->
    <input type="text" class="form-control">
</div>

Bootstrap 导航元素

表格导航或标签

创建一个标签式的导航菜单：

  • 以一个带有 class .nav 的无序列表开始。

  • 添加 class .nav-tabs。

    <p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>

胶囊式的导航菜单

基本的胶囊式导航菜单

如果需要把标签改成胶囊的样式，只需要使用 class .nav-pills 代替 .nav-tabs 即可

<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>

这里写图片描述

垂直的胶囊式导航菜单
在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠

<p>垂直的胶囊式导航菜单</p>
<ul class="nav nav-pills nav-stacked">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>

<img 3>

两端对齐的导航

在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified，让标签式或胶囊式导航菜单与父元素等宽

<p>两端对齐的导航元素</p>
<ul class="nav nav-pills nav-justified">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul><br><br><br>

<ul class="nav nav-tabs nav-justified">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>

<img 4>

禁用链接

对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态

下拉菜单

导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表

  • 带有下拉菜单的标签

    向标签添加下拉菜单的步骤如下：

    • 以一个带有 class .nav 的无序列表开始。
    • 添加 class .nav-tabs。

    • 添加带有 .dropdown-menu class 的无序列表。

      <p>带有下拉菜单的标签</p>
<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
         Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
         <li><a href="#">Swing</a></li>
         <li><a href="#">jMeter</a></li>
         <li><a href="#">EJB</a></li>
         <li class="divider"></li>
         <li><a href="#">分离的链接</a></li>
      </ul>
   </li>
   <li><a href="#">PHP</a></li>
</ul>

<img 5>

  • 带有下拉菜单的胶囊
    步骤与创建带有下拉菜单的标签相同，只是需要把 .nav-tabs class 改为 .nav-pills

Bootstrap 导航栏

默认的导航栏

创建一个默认的导航栏的步骤如下：

  • 向 <nav> 标签添加 class .navbar、.navbar-default。
  • 向上面的元素添加 role=”navigation”，有助于增加可访问性。
  • 向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。

  • 为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

    <nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java 
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分离的链接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

<img 6>

响应式的导航栏

为了给导航栏添加响应式特性，折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse">
         <span class="sr-only">切换导航</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分离的链接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

<img 7>

导航栏中的表单

使用 .navbar-form class,这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <form class="navbar-form navbar-left" role="search">
         <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
         </div>
         <button type="submit" class="btn btn-default">提交</button>
      </form>    
   </div>
</nav>

<img 8>

导航栏中的按钮

使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <form class="navbar-form navbar-left" role="search">
         <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
         </div>
         <button type="submit" class="btn btn-default">提交按钮</button>
      </form>    
      <button type="button" class="btn btn-default navbar-btn">
         导航栏按钮
      </button>
   </div>
</nav>

<img 9>

导航栏中的文本

如果需要在导航中包含文本字符串，请使用 class .navbar-text。这通常与 <p> 标签一起使用，确保适当的前导和颜色

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <p class="navbar-text">Signed in as Thomas</p>
   </div>
</nav>

非导航链接

使用 class navbar-link 来为默认的和倒转的导航栏选项添加适当的颜色

<p class="navbar-text navbar-right"> 
    <a href="#" class="navbar-link">Runoob</a> 登录
</p>

组件对齐方式

使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件

导航栏的位置

Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，可以把它放置在页面的顶部或者底部，或者可以让它成为随着页面一起滚动的静态导航栏。

  1. 固定到顶部：向 .navbar class 添加 class .navbar-fixed-top

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   ...
</nav>

  2. 固定到底部：向 .navbar class 添加 class .navbar-fixed-bottom

    <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
   ...
</nav>

  3. 静态的顶部（随着页面一起滚动的导航栏）：添加 .navbar-static-top class

    <nav class="navbar navbar-default navbar-static-top" role="navigation">
   ...
</nav>

  4. 倒置的导航栏（带有黑色背景白色文本的倒置的导航栏）：向 .navbar class 添加 .navbar-inverse class

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

<img 10>

Bootstrap 面包屑导航（Breadcrumbs）

面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。

Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中下面所示的 class 自动被添加：

.breadcrumb > li + li:before {
    color: #CCCCCC;
    content: "/ ";
    padding: 0 5px;
}

eg:

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">2013</a></li>
  <li class="active">十一月</li>
</ol>

<img 11>

Bootstrap 分页

分页（Pagination）

下表列出了 Bootstrap 提供的处理分页的 class。

<img 12>

默认的分页

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><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="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

<img 13>

翻页（Pager）

创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一样，翻页也是无序列表。默认情况下，链接是居中显示。

<img 14>

<!-- 默认的翻页 -->
<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

<!-- 对齐的链接 -->
<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

<img 15>

<img 16>

Bootstrap 标签

class .label 标签可用于计数、提示或页面上其他的标记显示。使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

<img 17>

Bootstrap 徽章（Badges）

徽章与标签相似，主要的区别在于徽章的边角更加圆滑。
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class=”badge”> 添加到链接、Bootstrap 导航等这些元素上即可

<h4>列表导航中的激活状态</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
   <li class="active">
      <a href="#">
         <span class="badge pull-right">42</span>
         首页
      </a>
   </li>
   <li><a href="#">简介</a></li>
   <li>
      <a href="#">
         <span class="badge pull-right">3</span>
         消息
      </a>
   </li>
</ul>

<img 18>

Bootstrap 超大屏幕（Jumbotron）

该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：

  • 创建一个带有 class .jumbotron. 的容器 <div>。

  • 除了更大的 <h1>，字体粗细 font-weight 被减为 200px。

    <div class="container">
   <div class="jumbotron">
      <h1>欢迎登陆页面！</h1>
      <p>这是一个超大屏幕（Jumbotron）的实例。</p>
      <p><a class="btn btn-primary btn-lg" role="button">
         学习更多</a>
      </p>
   </div>
</div>

<img 19>

Bootstrap 页面标题（Page Header）

页面标题（Page Header）会在网页标题四周添加适当的间距,如需使用页面标题（Page Header），把标题放置在带有 class .page-header 的 <div> 中

<div class="page-header">
   <h1>页面标题实例
      <small>子标题</small>
   </h1>
</div>

Bootstrap 缩略图

使用 Bootstrap 创建缩略图的步骤如下：

  • 在图像周围添加带有 class .thumbnail 的 <a> 标签。
  • 这会添加四个像素的内边距（padding）和一个灰色的边框。

  • 当鼠标悬停在图像上时，会动画显示出图像的轮廓。

    <a href="#" class="thumbnail">
    <img src="/wp-content/uploads/2014/06/kittens.jpg" 
    alt="通用的占位符缩略图">
</a>

添加自定义的内容

  • 把带有 class .thumbnail 的 <a> 标签改为 <div>。
  • 在该 <div> 内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。

  • 如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。

    <div class="thumbnail">
     <img src="/wp-content/uploads/2014/06/kittens.jpg" 
     alt="通用的占位符缩略图">
     <div class="caption">
        <h3>缩略图标签</h3>
        <p>一些示例文本。一些示例文本。</p>
        <p>
           <a href="#" class="btn btn-primary" role="button">
              按钮
           </a> 
           <a href="#" class="btn btn-default" role="button">
              按钮
           </a>
        </p>
     </div>
</div>

<img 20>

Bootstrap 警告（Alerts）

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

可取消的警告（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>

<img 21>

警告（Alerts）中的链接

在警告（Alerts）中创建链接的步骤如下：

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

Bootstrap 进度条

默认的进度条

  • 创建一个基本的进度条的步骤如下：
  • 添加一个带有 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>

<img 22>

条纹的进度条

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

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

动画的进度条

创建一个动画的进度条的步骤如下：

  • 添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。
  • 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
  • 添加一个带有百分比表示的宽度的 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: 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>

<img 23>

Bootstrap 多媒体对象（Media Object）

在 HTML 标签中添加以下两种形式来设置媒体对象：

  • .media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。

  • .media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

    <div class="media">
   <a class="pull-left" href="#">
      <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
      alt="媒体对象">
   </a>
   <div class="media-body">
      <h4 class="media-heading">媒体标题</h4>
      这是一些示例文本。这是一些示例文本。 
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
   </div>
</div>
<div class="media">
   <a class="pull-left" href="#">
      <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
      alt="媒体对象">
   </a>
   <div class="media-body">
      <h4 class="media-heading">媒体标题</h4>
      这是一些示例文本。这是一些示例文本。 
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      <div class="media">
         <a class="pull-left" href="#">
            <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
            alt="媒体对象">
         </a>
         <div class="media-body">
            <h4 class="media-heading">媒体标题</h4>
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。 
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。
         </div>
      </div>
   </div>
</div>

这里写图片描述

Bootstrap 列表组

列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：

  • 向元素 <ul> 添加 class .list-group。

  • 向 <li> 添加 class .list-group-item。

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

<img 25>

向列表组添加链接

<a href="#" class="list-group-item active">
   免费域名注册
</a>
<a href="#" class="list-group-item">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>

<img 26>

Bootstrap 面板（Panels）

面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可

面板标题

通过以下两种方式来添加面板标题：

  • 使用 .panel-heading class 可以很简单地向面板添加标题容器。to easily add a heading container to your panel.

  • 使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。

    <div class="panel panel-default">
   <div class="panel-heading">
      不带 title 的面板标题
   </div>
   <div class="panel-body">
      面板内容
   </div>
</div>

<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">
         带有 title 的面板标题
      </h3>
   </div>
   <div class="panel-body">
      面板内容
   </div>
</div>

<img 27>

面板脚注

把按钮或者副文本放在带有 class .panel-footer 的 <div> 中

<div class="panel panel-default">
   <div class="panel-body">
      这是一个基本的面板
   </div>
   <div class="panel-footer">面板脚注</div>
</div>

带语境色彩的面板

使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板

带表格的面板

<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
   <table class="table">
      <th>产品</th><th>价格 </th>
      <tr><td>产品 A</td><td>200</td></tr>
      <tr><td>产品 B</td><td>400</td></tr>
   </table>
</div>
<div class="panel panel-default">
   <div class="panel-heading">面板标题</div>
   <table class="table">
      <th>产品</th><th>价格 </th>
      <tr><td>产品 A</td><td>200</td></tr>
      <tr><td>产品 B</td><td>400</td></tr>
   </table>
</div>

<img 28>

Bootstrap Well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。

<div class="well well-lg">您好，我在大的 Well 中！</div>
<div class="well well-sm">您好，我在小的 Well 中！</div>

<img 29>

参考：http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

benhuo931115
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap 响应式_使用BootStrap的响应式网站
cukengwei3786的博客
08-06 868
Responsive Website Using BootStrap Bootstrap 3 tutorial. If you have not used BootStrap so far, or more than that – have not heard about it – I would recommend you take a closer look to this framewor...
bootstrap--framemark 整合
09-10
这是一个bootstrap+framemarker整合，还只是初版，大家可以看看，不喜勿喷。
bootstrap13-边框表格布局
weixin_34112030的博客
02-07 164
<!DOCTYPE html><html><head><meta charset="utf-8"><title>bootstrap13</title><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3....
BootStrap入门到实战：BootStrap组件（一）- Glyphicons字体图标、下拉菜单、按钮组、按钮式下拉菜单
最新发布
林林一928的博客
06-03 940
一、Glyphicons字体图标二、下拉菜单 用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性用jQuery实现1.3 菜单向上弹出2. 对齐.默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐3.对齐4.分割线5.禁用的菜单项三.按钮组。四.按钮式下拉菜单，1. 单按钮下拉菜单，2. 分裂式按钮下拉菜单...
Bootstrap 两端对齐的导航
歪脖先生的博客
05-18 2747
两端对齐的导航 为标签页导航或胶囊式导航组件添加.nav-justified类，可以实现两端对齐的导航。在大于 768px 的屏幕上，导航将填满父元素的宽度，而且菜单项可以像表格的单元格一样自适应宽度。在小屏幕上，导航将呈现堆叠排列。如： <ulclass="nav nav-tabs nav-justified"> <liclass="active"><...
Bootstrap 页面标题和面板
Charge8的博客
02-01 973
一、页面标题（Page Header）         它会在网页标题四周添加适当的间距和下边框。      &lt;div class="page-header"&gt; &lt;h3&gt;页面标题实例&lt;small&gt;子标题&lt;/small&gt;&lt;/h3&gt; &lt;/div&gt;      二、面板        面板组件用于把 DOM 组
拥Bootstrap入怀——导航栏篇
11-22
【Bootstrap导航栏详解】 ...总之，Bootstrap的导航栏功能强大，易于定制，能够轻松实现响应式布局和多种交互效果。通过合理使用Bootstrap提供的各种组件，开发者可以构建出美观且实用的网页导航栏。
AngularJs bootstrap搭载前台框架——准备工作
10-21
而Bootstrap则是Twitter开源的一套前端UI框架，它包含了一系列预先设计的组件和样式，能够快速构建响应式和移动设备优先的网页。 首先，我们需要了解如何准备AngularJS和Bootstrap的环境。如果你还不熟悉这两个技术...
Bootstrap基本组件学习笔记之分页(12)
09-01
在本篇笔记中，我们将专注于Bootstrap中的一个关键组件——分页，这在处理大量数据分页展示时尤其有用。 0x01 默认的分页 Bootstrap的分页组件`.pagination`通过简单的HTML结构即可实现。下面是一个基础的分页示例...
Bootstrap基本组件学习笔记之列表组(11)
09-01
在本篇博文中，我们将聚焦于Bootstrap中的一个基础组件——列表组(List Group)，它是构建列表样式的高效工具。 列表组允许你以列表的形式展示复杂和定制的内容，通常用于创建如导航菜单、排行榜或者新闻列表等。...
Bootstrap组件学习手记
01-06
### Bootstrap组件学习手记 #### 一、图标字体的使用 在Bootstrap中，图标字体的使用非常方便且直观。它们通常被嵌入到`<span>`标签中，并通过类名来调用不同的图标。作者提到在尝试使用这些图标时遇到了一些问题...
bootstrap步骤条-按钮-箭头样式
12-13
一款基于Bootstrap的纯CSS3步骤条-箭头指向类按钮样式。该按钮通过修改原生Bootstrap的按钮样式，来生成指向左侧或右侧的箭头按钮。
深入理解BootStrap-- 面板(panel)
极客神殿
12-31 8115
1、面板 面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码： ☑ Less版本：对应的源码文件是 panels.less ☑ Sass版本：对应的源码文件是 _panels.scss ☑ 编译后的Bootstrap：对应bootstrap.css文件第4995行～第5302行 2、面板–基础面板 基础面板...
Bootstrap 面板（Panels）
csdn_tingou的博客
09-26 1569
引用bootstrap的css和js文件   在html添加以下代码可显示不同颜色的面板 &lt;div class="panel panel-default"&gt; &lt;div class="panel-heading"&gt; &lt;h3 class="panel-title"&gt;面板标题:panel-default&lt;/h3&gt; &lt
bootstrap panel面板
难瘦不难过的专栏
07-12 3304
 html> lang="en"> charset="UTF-8"> Title rel="stylesheet" href="bootstrap.min.css"> ul,ol{ list-style: none; } class="contain
BootStrap框架
m0_57851747的博客
12-06 822
BootStrap框架的使用，包含栅格系统，组件，插件，全局样式，定制等
JQ-6 Bootstrap入门到实战；Bootstrap的（优缺点、安装、响应式容器原理、网格系统、响应式工具类、Bootstrap组件）；项目实践
qq_54075517的博客
07-25 1223
Bootstrap入门到实战；Bootstrap的（优缺点、安装教程、响应式容器原理、网格系统、响应式工具类、Bootstrap组件）；小项目实践
BootstrapTable之千分位分隔符设置
qzz12345的博客
04-16 1149
BootstrapTable之千分位分隔符设置 前言 在最近的工作中遇到了数字数据显示千分位分隔符的需求，这是数字显示中常见的需求，好在BootstrapTable中可以很容易的实现，具体思路为：写一个显示千分位的函数在对应的列调用即可。 一、自定义千分位分隔显示函数 自定义一个千分位显示的函数，具体代码如下所示，其中，调用toLocaleString()即可完成千分位分隔符显示的功能。但千分位分隔符显示的对象必须是数值，因此，对于不是数值的先要通过Number()将对象转成数值。 //显示千分
Bootstrap01
hmjcxy的博客
04-28 1188
Bootstrap
Bootstrap视频笔记：布局、代码与组件详解
无样式列表部分介绍了`pre`标签的使用，以及Bootstrap中变量的表示方法——`i`标签用于斜体。 表格相关知识包括`table-striped`、`table-bordered`和`table-hover`类，分别用于添加条纹样式、边框和悬停效果。按钮...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值