unity 分布式服务 yii vue部署 vue学习教程 网页后台模板 后台界面 十大erp系统 网络营销视频教程 matlab中不等于怎么表示 xshell搭建ss python操作文件 java9 java使用 java集合框架 java删除文件 java获取本地时间 p2pover qq飞车剧情辅助 html特殊符号 键盘指法练习软件 teraterm js跳出for循环 img写盘工具 极限防守图 ipad上市时间 fireworks序列号 appsync补丁 摇骰子表情包 固态硬盘有什么用 pcmark10 bat转exe vue响应式原理 ps魔棒快捷键 图片批处理 cad特性 小程序定位 中文正则 sed替换字符串 游戏脚本高级编程
当前位置: 首页 > 学习教程  > 

Bootstrap学习(二)——Bootstrap 布局组件

2020/10/16 17:43:22 文章标签: bootstrap文本框

Bootstrap 布局组件 Bootstrap 字体图标(Glyphicons) 什么是字体图标? 字体图标是在 Web 项目中使用的图标字体。 获取字体图标 Bootstrap 3.x 版本,在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件: glyphicons-h…

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


本文链接: http://www.dtmao.cc/news_show_300035.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?