Bootstrap面板学习使用


Posted in Javascript onFebruary 09, 2017

本文实例为大家分享了Bootstrap面板的具体实现代码,供大家参考,具体内容如下

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap</title>
  <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="ppanel panel-default"><!--panel是面板的意思-->
        <div class="panel-heading"><!--面板头部区域-->
          <h3 class="panel-title">水果</h3><!--面板头部区域标题样式-->
        </div>
        <div class="panel-body"><!--面板内容区域-->
          <p>几十块的割发代首看定居地方时刻到了房间打开看电视的空间的空间看到</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="ppanel panel-primary"><!--还可以是success、warning、danger等-->
        <div class="panel-heading">
          <h3 class="panel-title">水果</h3>
        </div>
        <div class="panel-body">
          <p>几十块的割发代首看定居地方时刻到了房间打开看电视的空间的空间看到</p>
        </div>
      </div>
    </div>
  </div>
  <script src="js/jquery-2.1.0.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>

效果图:

Bootstrap面板学习使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
详解js的异步编程技术的方法
Feb 09 #Javascript
原生JS实现简单放大镜效果
Feb 08 #Javascript
基于JavaScript实现本地图片预览
Feb 08 #Javascript
js 判断登录界面的账号密码是否为空
Feb 08 #Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 #Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 #Javascript
Bootstrap模态窗口源码解析
Feb 08 #Javascript
You might like
php 过滤危险html代码
2009/06/29 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
python的类方法和静态方法
2014/12/13 Python
Python selenium如何设置等待时间
2016/09/15 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Python----数据预处理代码实例
2019/03/20 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
中专毕业生自荐信范文
2013/11/28 职场文书
缓刑人员的思想汇报
2014/01/11 职场文书
公司新年寄语
2014/04/04 职场文书
机关保密承诺书
2014/06/03 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
学生检讨书怎么写
2014/10/09 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫