编程 Javascript

Bootstrap常用组件学习(整理)

Posted in Javascript onMarch 24, 2017

一、Bootstrap 面板（Panels）

本章将讲解 Bootstrap 面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可，如下面的实例所示：

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

1.面板标题

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

使用 .panel-heading class 可以很简单地向面板添加标题容器。

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

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <title>Bootstrap 实例 - 面板标题</title>
 <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>

Bootstrap常用组件学习(整理)

2.面板脚注

我们可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可。下面的实例演示了这点：

实例

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

3.带语境色彩的面板

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

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <title>Bootstrap 实例 - 带语境色彩的面板</title>
 <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-primary">
 <div class="panel-heading">
  <h3 class="panel-title">面板标题</h3>
 </div>
 <div class="panel-body">
  这是一个基本的面板
 </div>
</div>
<div class="panel panel-success">
 <div class="panel-heading">
  <h3 class="panel-title">面板标题</h3>
 </div>
 <div class="panel-body">
  这是一个基本的面板
 </div>
</div>
<div class="panel panel-info">
 <div class="panel-heading">
  <h3 class="panel-title">面板标题</h3>
 </div>
 <div class="panel-body">
  这是一个基本的面板
 </div>
</div>
<div class="panel panel-warning">
 <div class="panel-heading">
  <h3 class="panel-title">面板标题</h3>
 </div>
 <div class="panel-body">
  这是一个基本的面板
 </div>
</div>
<div class="panel panel-danger">
 <div class="panel-heading">
  <h3 class="panel-title">面板标题</h3>
 </div>
 <div class="panel-body">
  这是一个基本的面板
 </div>
</div>
</body>
</html>

Bootstrap常用组件学习(整理)

4.带表格的面板

为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个 <div> 包含 .panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 <div>，则组件会无中断地从面板头部移动到表格。

下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <title>Bootstrap 实例 - 带表格的面板</title>
 <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-primary">
 <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>
</body>
</html>

Bootstrap常用组件学习(整理)

我们可以看到，第一个表格和第二个表格，有一些不同，第一个含有.panel-body样式，所以，可以分隔表格和头内容。

二、Bootstrap 多媒体对象（Media Object）

本章我们将讲解 Bootstrap 中的多媒体对象（Media Object）。这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象：

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

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

让我们来看看下面这个有关默认的媒体对象 .media 的实例：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <title>Bootstrap 实例 - 默认的媒体对象</title>
 <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="media">
 <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒体对象">
 </a>
 <div class="media-body">
  <h4 class="media-heading">郑智</h4>
  中国对和韩国队的比赛，中国对必胜！?? [2017-03-23]
 </div>
</div>
<div class="media">
 <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
    <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>
<div class="media">
 <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <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>
</body>
</html>

Bootstrap常用组件学习(整理)

以上所述是小编给大家介绍的Bootstrap常用组件学习(整理)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

Bootstrap常用组件学习(整理)

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 滚轮事件使用说明

Mar 07 Javascript

基于JQuery的日期联动实现代码

Feb 24 Javascript

JS可以控制样式的名称写法一览

Jan 16 Javascript

基于jQuery实现网页进度显示插件

Mar 04 Javascript

实例讲解使用原生JavaScript处理AJAX请求的方法

May 10 Javascript

jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

Jun 02 Javascript

微信小程序开发实战教程之手势解锁

Nov 18 Javascript

react-native之ART绘图方法详解

Aug 08 Javascript

vue如何判断dom的class

Apr 26 Javascript

微信小程序制作表格的方法

Feb 14 Javascript

node.js爬虫框架node-crawler初体验

Oct 29 Javascript

JavaScript/TypeScript 实现并发请求控制的示例代码

Jan 18 Javascript

详解打造 Vue.js 可复用组件

Mar 24 #Javascript

JavaScript获取URL参数的方法之一

Mar 24 #Javascript

原生JS改变透明度实现轮播效果

Mar 24 #Javascript

深入理解vue路由的使用

Mar 24 #Javascript

原生JS实现导航下拉菜单效果

Nov 25 #Javascript

jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】

Mar 24 #jQuery

基于HTML5+JS实现本地图片裁剪并上传功能

Mar 24 #Javascript