Bootstrap面板学习使用

 更新时间:2017年02月09日 08:29:38   作者:轻扰时光  
这篇文章主要为大家详细介绍了Bootstrap面板的学习使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

效果图:

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

相关文章

  • jQuery实现动态添加、删除按钮及input输入框的方法

    jQuery实现动态添加、删除按钮及input输入框的方法

    这篇文章主要介绍了jQuery实现动态添加、删除按钮及input输入框的方法,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
    2017-04-04
  • 支持移动端原生js轮播图

    支持移动端原生js轮播图

    这篇文章主要介绍了支持移动端原生js轮播图的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Javascript实现图片懒加载的示例代码

    Javascript实现图片懒加载的示例代码

    最近公司和第三方材料供应商对接开发了物资集采平台,其中有个功能需求需要展示数百张材料信息图片,有时页面会出现卡顿的情况,并使用了图片懒加载的方式进行了优化,下面把方法分享给大家一起学习,感兴趣的小伙伴跟着小编一起来看看吧
    2024-12-12
  • JavaScript实现九宫格点击变色效果

    JavaScript实现九宫格点击变色效果

    这篇文章主要为大家详细介绍了JavaScript实现九宫格点击变色效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JavaScript 跳出iframe框架示例详解

    JavaScript 跳出iframe框架示例详解

    这篇文章主要为大家介绍了JavaScript跳出iframe框架示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • JavaScript错误处理

    JavaScript错误处理

    这篇文章主要介绍了JavaScript错误处理的相关资料,需要的朋友可以参考下
    2015-02-02
  • 深入理解JavaScript中的for循环

    深入理解JavaScript中的for循环

    这篇文章主要给大家深入的介绍了JavaScript中的for循环,其中包括ES5中的三种for循环,分别是简单for循环、for-in以及forEach,另外还详细介绍了ES6新增的一种循环:for-of ,有需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-02-02
  • js实现四舍五入完全保留两位小数的方法

    js实现四舍五入完全保留两位小数的方法

    这篇文章主要介绍了js实现四舍五入完全保留两位小数的方法,涉及javascript针对浮点数的数值运算相关技巧,需要的朋友可以参考下
    2016-08-08
  • JavaScript中Hoisting详解 (变量提升与函数声明提升)

    JavaScript中Hoisting详解 (变量提升与函数声明提升)

    函数声明和变量声明总是被JavaScript解释器隐式地提升(hoist)到包含他们的作用域的最顶端。下面这篇文章主要给大家介绍了关于JavaScript中Hoisting(变量提升与函数声明提升)的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-08-08
  • JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析

    JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)

    这篇文章主要介绍了JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法,结合实例形式分析了javascript函数式编程中箭头函数相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2019-05-05

最新评论