Bootstrap UI框架

最新推荐文章于 2024-03-10 09:15:00 发布

wukf_it

最新推荐文章于 2024-03-10 09:15:00 发布

阅读量2.6k

点赞数

分类专栏： UI框架

UI框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

组件

无数可复用的组件，包括导航、警告框、弹出框等更多功能。

案例

用于展示可切换、有关联的一系列链接。与下拉菜单JavaScript插件配合使用。

    
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>

标记

以下是下拉菜单所需的HTML。下拉菜单的触发器和整个下拉菜单都需要包裹在.dropdown中，或者声明为position: relative;的其它页面元素中。

    
    <div class="dropdown">
  <!-- Link or button to toggle dropdown -->
  <ul class="dropdown-menu" role="menu"  aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

选项

菜单可以右对齐，并且可以添加二级下拉菜单。

对齐菜单

向.dropdown-menu添加.pull-right即可右对齐下拉菜单。

    
    <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

禁用菜单选项

向<li>添加.disabled即可禁用菜单中的某个链接。

    
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Regular link</a></li>
  <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
  <li><a tabindex="-1" href="#">Another link</a></li>
</ul>

下拉菜单的子菜单

通过添加一些简单的标记，可以给下拉菜单增加一个二级菜单，这个二级菜单会在鼠标悬停时自动展现，就像OS X中的效果。在现有的下拉菜单中，给任意的li添加.dropdown-submenu即可自动赋予一个二级菜单。

默认样式

向上弹出的子菜单

左侧弹出的子菜单

    
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

案例

两个基本类型和更多变种类型。

单一按钮组

将带有.btn类的一系列按钮包裹在.btn-group中。

    
    <div class="btn-group">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>

多维按钮组

将多个<div class="btn-group">放入<div class="btn-toolbar">中即可获得更多复杂的组件。

    
    <div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

垂直按钮组

让一组按钮呈现出垂直方向堆叠的样式。

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

复选框和单选框形式

按钮组还可以从能上表现得像单元框（一次只能有一个按钮被选中）或复选框（可同时选中多个按钮）。详见JavaScript插件文档。

按钮组中使用下拉菜单

注意！带有下拉菜单的按钮必须单独包裹在.btn-group中，然后才能放入.btn-toolbar中，只有这样才能正确渲染整个组件。

概览和案例

将按钮放入.btn-group中，并为其添加适当的菜单标签，即可让此按钮触发下拉菜单。

    
    <div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

兼容所有尺寸的按钮

按钮式下拉菜单可以和所有表示尺寸的类共存：.btn-large、.btn-small、.btn-mini。

引入JavaScript

按钮式下拉菜单需要和Bootstrap下拉菜单插件配合使用。

在某些情况下—例如手机—下拉菜单可能会超出可视范围，你需要自己手工解决这一问题或者修改JavaScript。

分裂式按钮下拉菜单

在按钮组的基础上，我们可以很容易的创建分裂式按钮。分裂式按钮左侧是一个标准形式的按钮，右侧是一个可触发下拉菜单的链接。

    
    <div class="btn-group">
  <button class="btn">Action</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

按钮尺寸

使用这些类可以调整按钮大小：.btn-mini、.btn-small、.btn-large。

    
    <div class="btn-group">
  <button class="btn btn-mini">Action</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

向上弹出式菜单

给.dropdown-menu的直接父节点添加一个类就可以让下拉菜单由下到上显示。.caret将会自动翻转，菜单的位置也会变为由下到上而不是由上到下了。

    
    <div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

轻量级默认样式相同的标记结构，不同的类

所有的导航组件都列在这里了—标签页、pills和列表—共用.nav类，具有相同的标记结构和样式

基本标签页

基于<ul>并添加.nav-tabs类：

    
    <ul class="nav nav-tabs">
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

基本pills

相同的HTML结构，但这里使用了.nav-pills类：

    
    <ul class="nav nav-pills">
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

禁用状态

为任一导航组件（标签页、pills或列表）添加.disabled类，均可让链接变灰并失去鼠标悬停效果。但是链接仍然是可以点击的，除非你将链接的href属性去除，你还可以写JavaScript代码阻止用户点击链接。

    
    <ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">首页</a></li>
  ...
</ul>

组件对齐

可以使用.pull-left 或 .pull-right工具类来对齐导航链接。每个类都实现特定方向的浮动。

堆叠式排列

标签页和pills默认都是水平排列的，只需额外添加一个.nav-stacked类即可让他们实现堆叠式排列。

堆叠式排列的标签页

    
    <ul class="nav nav-tabs nav-stacked">
  ...
</ul>

堆叠式排列的pills

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

下拉菜单

通过一小段HTML代码和下拉菜单JavaScript插件即可添加一个下拉菜单。

Tabs with dropdowns

    
    <ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Dropdown
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

带有下拉菜单的Pills

    
    <ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Dropdown
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
    </ul>
  </li>
</ul>

导航列表

这是一个简单并且容易的方式来构建一个带有可选标头的导航列表。他们经常被用在侧栏处，就像OS X中的Finder。

导航列表案例

将class="nav nav-list"添加到一组链接列表中：

    
    <ul class="nav nav-list">
  <li class="nav-header">List header</li>
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">Library</a></li>
  ...
</ul>

注意导航列表需要嵌套时，将class="nav nav-list"添加到被嵌套的<ul>中。

水平分割线

新建一个列表项，并赋予.divider类，即可创建一条水平分割线，就像这样：

    
    <ul class="nav nav-list">
  ...
  <li class="divider"></li>
  ...
</ul>

标签页式导航

仅需一个简单的插件就可以在标签页之间切换内容。Bootstrap整合了4中样式的标签页样式：top (默认)、right、bottom和left。

案例

为了让标签页可切换，需要在.tab-content中创建一个带有唯一ID的.tab-pane。

I'm in Section 1.

    
    <div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

淡入效果

为了让标签页有淡入效果，需要给每个.tab-pane添加.fade类。

需引入jQuery插件

所有可切换标签页都需要jQuery插件的支持。阅读更多关于JavaScript插件文档吧。

变换方向的标签页

底部

翻转HTML的顺序, 并添加一个.tabs-below类即可让标签页置于底部。

I'm in Section A.

    
    <div class="tabbable tabs-below">
  <div class="tab-content">
    ...
  </div>
  <ul class="nav nav-tabs">
    ...
  </ul>
</div>

左侧

添加.tabs-left类将标签页置于左侧。

I'm in Section A.

    
    <div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

右侧

添加.tabs-right类将标签页置于右侧。

I'm in Section A.

    
    <div class="tabbable tabs-right">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

基本样式的导航条

导航条的基本样式是static（相对于fixed、absolute等定位样式）的（不固定在页面顶部），并包含一个项目（或网站）名称和基本的导航项。将导航条放入.container中就可以限制其宽度。

    
    <div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">首页</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

导航条组件

品牌

只需要一个连接标签就可以展示你的品牌货项目名称。

    
    <a class="brand" href="#">Project name</a>

导航链接

导航条中条目可以是无序列表。

    
    <ul class="nav">
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

添加分隔符同样的简单，只需增加一个空白的条目并为其设置一个类即可。如下所示：

    
    <ul class="nav">
  ...
  <li class="divider-vertical"></li>
  ...
</ul>

表单

要想在导航条中放置一个表单，需要像下面这个案例一样添加相应的类。对于一个默认表单，需要包含.navbar-form 和 .pull-left 或.pull-right用以对齐。

    
    <form class="navbar-form pull-left">
  <input type="text" class="span2">
  <button type="submit" class="btn">Submit</button>
</form>

搜索表单

在导航条内为form添加.navbar-search，并为输入框添加.search-query即可获得一个搜索表单。

    
    <form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Search">
</form>

组件对齐

使用.pull-left 或 .pull-right工具类用以对齐链接、搜索表单或文本。每个CSS类都会指定浮动的方向。

使用下拉菜单

只需增加少量的标记即可在导航条中添加下拉菜单，另外还需要下来菜单JavaScript插件配合使用。

    
    <ul class="nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Account
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

查看JavaScript下拉菜单完整文档

文本

用.navbar-text包裹文本字符串可以很容易的突出此文本，一般使用<p>标签。

可选的显示方案

为最外层div添加一个额外.navbar类，就可把导航条固定在顶部或者底部。

固定在顶部

只需添加.navbar-fixed-top类，记得要给<body>增加40px的padding（内补）才能不让导航条挡住其下面的内容。一定要在Bootstrap核心CSS（即bootstrap.css）文件之后，响应式CSS（bootstrap-responsive.css）文件之前添加。

    
    <div class="navbar navbar-fixed-top">
  ...
</div>

固定在底部

添加.navbar-fixed-bottom即可。

    
    <div class="navbar navbar-fixed-bottom">
  ...
</div>

顶部静态导航条

通过添加.navbar-static-top即可创建一个与页面等宽的导航条，它会随着页面向下滚动而消失。和.navbar-fixed-top类不同的是，你不需要对改变body的内补（padding）。

    
    <div class="navbar navbar-static-top">
  ...
</div>

响应式导航条

要实现一个响应式导航条，需要把导航条包含在.nav-collapse.collapse中，并添加一个触发按钮.btn-navbar。

    
    <div class="navbar">
  <div class="navbar-inner">
    <div class="container">
 
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
 
      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="#">Project name</a>
 
      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

注意！ 响应式导航条需要需要 collapse插件和响应式Bootstrap CSS 文件协同工作。

反色

通过添加.navbar-inverse类可改变导航条的外观。

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

案例

下面是一个简单的案例，他可以展示在多个页面上，用以页面之间的跳转。

    
    <ul class="breadcrumb">
  <li><a href="#">首页</a> <span class="divider">/</span></li>
  <li><a href="#">Library</a> <span class="divider">/</span></li>
  <li class="active">Data</li>
</ul>

标准分页

这种简单的分页方式的灵感来自Rdio，非常适合app和搜索结果的展示。分页中的每一块都非常大，不易弄错，而且很容易扩展，并具有非常大的点击区域。

    
    <div class="pagination">
  <ul>
    <li><a href="#">Prev</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="#">Next</a></li>
  </ul>
</div>

选项

禁用与活动状态

可根据不同情况定制链接。用.disabled标明链接不可点击，用.active标明当前页。

    
    <div class="pagination">
  <ul>
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

你还可以使用span标签替代a标签，这样就去除了点击功能，同时又能保留需要的样式。

    
    <div class="pagination">
  <ul>
    <li class="disabled"><span>&laquo;</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

尺寸

需要更大或更小的分页吗？添加.pagination-large、.pagination-small 或 .pagination-mini就可以改变分页尺寸。

    
    <div class="pagination pagination-large">
  <ul>
    ...
  </ul>
</div>
<div class="pagination">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-small">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-mini">
  <ul>
    ...
  </ul>
</div>

对齐

后面列出的两个类可以改变分页的对齐方式：.pagination-centered 和 .pagination-right。

    
    <div class="pagination pagination-centered">
  ...
</div>

    
    <div class="pagination pagination-right">
  ...
</div>

翻页

用更少的标记和样式来创建简单的“前一页”和“后一页”。这种分页方式非常适用于简单的网站，比如博客或者杂志网站。

默认样式案例

默认情况下，翻页中的链接居中显示。

    
    <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>

禁用状态

分页也可使用.disabled工具类让链接处于禁用状态。

    
    <ul class="pager">
  <li class="previous disabled">
    <a href="#">&larr; Older</a>
  </li>
  ...
</ul>

标签	标记
默认样式	`<span class="label">Default</span>`
成功	`<span class="label label-success">Success</span>`
警告	`<span class="label label-warning">Warning</span>`
重要	`<span class="label label-important">Important</span>`
信息	`<span class="label label-info">Info</span>`
反色	`<span class="label label-inverse">Inverse</span>`

徽章

名称	案例	标记
默认样式	1	`<span class="badge">1</span>`
成功	2	`<span class="badge badge-success">2</span>`
警告	4	`<span class="badge badge-warning">4</span>`
重要	6	`<span class="badge badge-important">6</span>`
信息	8	`<span class="badge badge-info">8</span>`
反色	10	`<span class="badge badge-inverse">10</span>`

轻松实现折叠效果

当没有任何内容时，可以很方便的将标签和徽章折叠起来（通过CSS的 :empty 选择器）。

Hero块

一个轻量、灵活的用于展示网站重点内容的组件。很适合营销类或内容类网站。

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

    
    <div class="hero-unit">
  <h1>Heading</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Learn more
    </a>
  </p>
</div>

页面标题

给h1套上这个简单的外壳，就可以为其增加间隔并从页面中分离出来。也可以在h1里增加small元素，就像其他大部分组件一样（需要增加额外的样式）。

    
    <div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

默认缩略图样式

默认情况下，Bootstrap中的缩略图被设计为用最少的标记展示带链接的图片。

自定义

只需添加一点额外的标记，就可以在缩略图里添加任何类型的HTML内容，如标题、段落或按钮。

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action
Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action
Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action

为什么要用缩略图

缩略图（v1.4版本之前叫.media-grid）很适合将图片、视频、图片搜索结果、商品列表等展示为网格样式。他们可以是链接或纯粹的内容。

简单、灵活的标记

组成缩略图的标记很简单—ul包裹任意数量的li 元素即可。它同样很灵活，只需添加少量标记即可包裹你需要展示的任何内容。

使用栅格中的列尺寸

最后，缩略图组件使用现有的栅格系统中的类—例如.span2 或.span3—用以控制缩略图的尺寸。

标记

如前面所提到的，缩略图所必须的标记很少、很直观。下面就来看看如何实现一个图片链接：

    
    <ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

如果在缩略图中自定义HTML内容，标记的变化不大。为了放进来块级内容，我们把<a> 替换成了<div>，就像这样：

    
    <ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>Thumbnail label</h3>
      <p>Thumbnail caption...</p>
    </div>
  </li>
  ...
</ul>

默认警告框

下面这个基本的警告框是在.alert中包裹任何文本和一个可选的关闭按钮。

Warning! Best check yo self, you're not looking too good.

    
    <div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

关闭按钮

Safari和Opera移动版浏览器上，当使用<a>标签关闭警告框时，除了添加data-dismiss="alert"属性外，还需要包含href="#"属性。

    
    <a href="#" class="close" data-dismiss="alert">&times;</a>

可选方案是，使用带有data属性的<button>元素，就像此文档中一样。当使用 <button>时，必须包含type="button"属性，否则你将无法执行提交（submit）动作。

    
    <button type="button" class="close" data-dismiss="alert">&times;</button>

通过JavaScript代码关闭

使用警告框jQuery插件可以快速、方便的关闭警告框。

选项

对于较长的信息，通过添加.alert-block类可以增加警告框上下方向的内补（padding）。

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    
    <div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4>Warning!</h4>
  Best check yo self, you're not...
</div>

其它

通过添加其它类，可以改变警告框的含义。

错误或危险

Oh snap! Change a few things up and try submitting again.

    
    <div class="alert alert-error">
  ...
</div>

成功

Well done! You successfully read this important alert message.

    
    <div class="alert alert-success">
  ...
</div>

信息

Heads up! This alert needs your attention, but it's not super important.

    
    <div class="alert alert-info">
  ...
</div>

案例和标记

基本样式

默认样式是带有垂直渐变的进度条。

    
    <div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

条纹样式

使用渐变创建的一个条纹效果的进度条。不支持IE7-8。

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

动画样式

为.progress-striped添加.active，即可创建一个从右向左变化的条纹样式。IE全系列都不支持此效果。

    
    <div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

堆叠样式

将多个进度条放入同一个.progress中即可创建堆叠样式。

    
    <div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

选项

条纹进度条

类似纯色样式，我们还可以创建不同颜色的条纹进度条。

    
    <div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

浏览器的支持

进度条依赖于CSS3的渐变、过度和动画特性，这些都是不被IE7-9 或较老版本的Firefox所支持的。

IE10和Opera 12之前的版本均不支持动画特性。

这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右对齐的图片（就像blog内容或Tweets等）。

默认案例

默认样式是在内容区域的左或右侧浮动一个媒体对象（图片、视频、音频）。

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

    
    <div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
 
    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>

媒体列表

使用一些额外的标记就可将媒体包含在列表内（对评论或文章列表很有用）。

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    
    <ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
 
      <!-- Nested media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Wells

well能给一个页面元素添加简单的嵌入（inset）效果。

Look, I'm in a well!

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

可选的类

这两个类用以控制内补和圆角效果。

Look, I'm in a well!

    
    <div class="well well-large">
  ...
</div>

Look, I'm in a well!

    
    <div class="well well-small">
  ...
</div>

关闭图标

关闭图标用来关闭模态对话框或警告框。

    
    <button class="close">&times;</button>

如果你选择使用连接标签的话，在iOS设备上需要一个href="#"配合点击事件。

    
    <a class="close" href="#">&times;</a>

辅助类

用于小屏幕或调整行为的简单、功能单一的类。

.pull-left

让页面元素向左浮动

    
    class="pull-left"

    
    .pull-left {
  float: left;
}

.pull-right

让页面元素向右浮动

    
    class="pull-right"

    
    .pull-right {
  float: right;
}

.muted

改变页面元素的颜色为#999

    
    class="muted"

    
    .muted {
  color: #999;
}

.clearfix

为任意页面元素清除浮动

    
    class="clearfix"

    
    .clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}
    
    
     
     

    
    
    
    
     
     

    
    
    
    
     
     http://www.bootcss.com/components.html

wukf_it

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap UI框架

Bootstrap中文网首页起步脚手架基本CSS样式组件JavaScript插件定制Lesscss教程关于组件无数可复用的组件，包括导航、警告框、弹出框等更多功能。下拉菜单按钮组按钮下拉菜单导航导航条面包屑分页标签与徽章排版缩略图警告框进度条媒体对象Misc下拉菜单案例用于展示可切换、有关联
复制链接

扫一扫