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常用组件学习(整理),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
如何用threejs实现实时多边形折射
May 07 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
You might like
PHP两种快速排序算法实例
2015/02/15 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
python图形用户接口实例详解
2019/12/16 Python
PyTorch实现AlexNet示例
2020/01/14 Python
Python定时器线程池原理详解
2020/02/26 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
css3学习心得分享
2013/08/19 HTML / CSS
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
智能旅行箱:Horizn Studios
2018/04/30 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
大学运动会通讯稿
2014/01/28 职场文书
销售助理岗位职责
2014/02/21 职场文书
行政助理工作职责范本
2014/03/04 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
学校文明单位申报材料
2014/05/06 职场文书
关于保护环境的标语
2014/06/09 职场文书
党支部季度考核意见
2015/06/02 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
小学班主任教育随笔
2015/08/15 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android