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中input中readonly和disabled区别介绍
Oct 23 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
js回到页面指定位置的三种方式
Dec 17 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
咖啡的化学
2021/03/03 咖啡文化
phpmyadmin操作流程
2006/10/09 PHP
MySQL中create table语句的基本语法是
2007/01/15 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
python爬取代理ip的示例
2020/12/18 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
业务副厂长岗位职责
2014/01/03 职场文书
大一军训感言
2014/01/09 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
2014年底个人工作总结
2015/03/10 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
python 详解turtle画爱心代码
2022/02/15 Python
MySQL视图概念以及相关应用
2022/04/19 MySQL