首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
JavaScript实现缓动动画
Nov 25 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
太阳码(1) pdf(1) JDBC(3) Eclipse(1) openGauss(1) ant design(2) Word(2) cypress(1) 二维码(2) 延时任务(1)
You might like
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
js实现简单扫雷
2020/11/27 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
python实现猜数游戏
2020/03/27 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
英国露营设备和户外服装购物网站：Simply Hike
2019/05/05 全球购物
高中生的自我鉴定范文
2014/01/24 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
医药销售自荐书
2014/05/29 职场文书
高一军训的心得体会
2014/09/01 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
vue elementUI批量上传文件
2022/04/26 Vue.js