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>

效果图：

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

赞 (0)

相关推荐

  • Bootstrap源码解读媒体对象、列表组和面板（10）

    媒体对象 基础媒体对象 例如: <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/350x150" alt="..."> </a> <div class="media-bo

  • Bootstrap基本组件学习笔记之面板(14)

    Bootstrap基本组件学习笔记之面板(14)

    直接看Bootstrap面板例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bo

  • 浅析Bootstrap组件之面板组件

    浅析Bootstrap组件之面板组件

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 面板组件主要作用是用来处理一些其他组件无法完成的功能,在不同的版本中具有不同的源码: LESS:panels.less SASS:_panels.scss 基础面板非常简单,就是一个div容器中运用了类.panel的样式,产生一个具有边框的文本显示块,由于panel不控制主题颜色,所以在.panel基础上增加一个控制

  • Bootstrap面板（Panels）的简单实现代码

    Bootstrap面板（Panels）的简单实现代码

    本文实例为大家分享了Bootstrap面板展示的具体代码,供大家参考,具体内容如下 一.基本的面板 html代码 <!DOCTYPE html> <html> <head> <title>Bootstrap list-group</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.mi

  • Bootstrap面板使用方法

    面板样式是在很多种情况下都可能会使用到的样式之一,例如博客的侧边栏.企业网站的公告栏.栏目列表等. 面板样式除了内容之外,还有一个面板头部可以添加标题,让我们通过这篇文章看看Bootstrap面板样式的使用方法. Bootstrap面板基本样式 直接调用面板样式也非常容易,只需要通过以下代码即可实现: <div class="panel panel-default"> <div class="panel-body"> Basic panel

  • Bootstrap每天必学之面板

    Bootstrap每天必学之面板

    1.面板 面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能.同样在不同的版本中具有不同的源码: ☑ Less版本:对应的源码文件是 panels.less ☑ Sass版本:对应的源码文件是 _panels.scss ☑ 编译后的Bootstrap:对应bootstrap.css文件第4995行-第5302行 2.面板–基础面板 基础面板非常简单,就是一个div容器运用了"panel"样式,产生一个具有边框的文本显示块.由于&

  • 基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard

    基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard

    这是一款基于Bootstrap的Metro风格的后台管理面板应用,Bootstrap Metro Dashboard的UI是基于Twitter Bootstrap样式的,同时使用了jQuery 1.9.1和jQuery UI组件,非常适合做网站的后台管理系统界面. Bootstrap Metro Dashboard介绍  Bootstrap Metro Dashboard使用了以下jQuery插件:  fullcalendar.min.js jquery.chosen.min.js jquery

  • Bootstrap面板学习使用

    Bootstrap面板学习使用

    本文实例为大家分享了Bootstrap面板的具体实现代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu

  • Bootstrap组件学习之导航、标签、面包屑导航(精品)

    Bootstrap组件学习之导航、标签、面包屑导航(精品)

    导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- <link rel="stylesheet" >--> <link rel="stylesheet" href="css/bootst

  • BootStrap入门学习第一篇

    BootStrap入门学习第一篇

    本文实例为大家分享了BootStrap入门学习的第一篇,供大家参考,具体内容如下 1.环境搭建 中文官网下载地址:http://www.bootcss.com/ 右击选中的WEB项目,点击导入,选择文件系统,然后下一步,选择BootStrap文件目录路径,如下: 完成后,WEB项目下的css.img.js就出现相应文件,说明导入成功. 然后导入较新版本的JQuery库,目录结构如下: 至此环境搭建完成. 3.BootStrap基本模板 <!DOCTYPE html> <html lang

  • Bootstrap选项卡学习笔记分享

    Bootstrap选项卡学习笔记分享

    本文实例为大家分享了Bootstrap选项卡的学习笔记,供大家参考,具体内容如下 tab选项卡 <body> <div class="container"> <!-- tab选项卡 --> <ul class="nav nav-tabs"> <li class="active"><a href="#pan1" data-toggle="tab"

  • 通过bootstrap全面学习less

    很早之前就听说过less了,但是一直拖着没去学习.最近抽空看了less,其实语法很简单,看一遍基本就知道怎么用了.但是问题又来了,那我在什么时候用less呢.平时自己写页面用less的话,感觉是方便了些,但是难道好处就只是这样? 刚好最近也在学习bootstrap,发现其源文件就是用less写的,看了之后,我才深深体会的less的强大,对less也有了更深一层的理解. 1.Less是什么? LESS CSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动

  • 第一次记录Bootstrap table学习笔记（1）

    第一次使用Bootstrap-table这个表格插件,记录一下使用过程中遇到的问题. |引入CSS文件 <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css"> |引入相关库 我们需要引入Jquery库.bootstrap库.以及bootstrap-table.j

  • Bootstrap基础学习

    Bootstrap是一个基于栅格结构的前端结构框架(当然也有JS,JQuery),它的优点是内容框架能够迅速搭建起来,基于媒介查询可以使搭建的页面迅速的适应不同的用户端,无论是手机,平板,还是PC,基本上都能自适应,当然新版本已经开始不支持IE6了,对IE8的支持也很有限,毕竟IE8对HTML5的支持不太好,(说实话,我自己也不喜欢IE6~8,对于我这种初级选手来说,兼容性有时候真费劲,不仅项目上要用,连面试也要用,有没有搞错嘛,遇到了,上网查一下不就行了.发个牢骚,该会的还是得会啊!!!) 闲

  • Bootstrap table学习笔记（2） 前后端分页模糊查询

    Bootstrap table学习笔记（2） 前后端分页模糊查询

    在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下,顺便做个总结: 1.前端分页 2.后端分页 3.模糊查询 前端分页相当简单,在我添加了2w条测试数据的时候打开的很流畅,没有卡顿. $(function(){ a(); }); function a () { $('#yourtable').bootstrapTable({ url: "/user/getUserList/", method:"post", dataType: "json&

随机推荐