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 相关文章推荐
常用简易JavaScript函数
Apr 09 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 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中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
一个简单的php路由类
2016/05/29 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
javascript 对象的定义方法
2007/01/10 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
详解vue跨组件通信的几种方法
2017/06/15 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
类的核心特性有哪些
2014/01/01 面试题
总经理岗位职责
2013/11/09 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
如何写自我鉴定
2014/03/19 职场文书
新教师岗前培训方案
2014/06/05 职场文书
安全环保标语
2014/06/09 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
交通安全教育主题班会
2015/08/12 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers