编程 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获得选中文本内容的方法

Dec 02 Javascript

jQuery使用数组编写图片无缝向左滚动

Dec 11 Javascript

Javascript 判断是否存在函数的方法

Jan 03 Javascript

Bootstrap中点击按钮后变灰并显示加载中实例代码

Sep 23 Javascript

BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析

Dec 01 Javascript

原生js实现轮播图

Feb 27 Javascript

Vue实现数字输入框中分割手机号码的示例

Oct 10 Javascript

使用vue-router为每个路由配置各自的title

Jul 30 Javascript

关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

Dec 09 Javascript

jQuery鼠标滑过横向时间轴样式(代码详解)

Nov 01 jQuery

基于小程序请求接口wx.request封装的类axios请求

Jul 02 Javascript

分享几个JavaScript运算符的使用技巧

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