面板：

<!--

    panel                      面板

    panel-heading            面板头部

    panel-title                面板标题样式

    panel-body                面板内容

-->

<div class="container">

    <div class="row">

        <div class="panel panel-info">

            <div class="panel-heading">

                <h3 class="panel-title">W3cSchool</h3>

            </div>

            <div class="panel-body">

                javajavajavajavajavajava

                javajavajavajavajavajava

            </div>

            <!-- 面板和列表组结合  -->

            <ul class="list-group">

                <li class="list-group-item" >html</li>

                <li class="list-group-item" >css</li>

                <li class="list-group-item" >java</li>

            </ul>

        </div>

    </div>

</div>

效果图：

modal：

<body>

<div class="container">

    <div class="row">

        <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">弹出</button>

    </div>

</div>

<div class="modal fade" id="mymodal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button class="close" data-dismiss="modal">&times;</button>

                修改人员信息

            </div>

            <div class="modal-body">

                <p>javajavajavajavajavajava</p>

                <p>javajavajavajavajavajava</p>

            </div>

            <div class="modal-footer">

                <button class="btn btn-primary">确定</button>

                <button class="btn btn-danger" data-dismiss="modal">取消</button>

            </div>

        </div>

    </div>

</div>

<script type="text/javascript" src="jquery/jquery.min.js"></script>

<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>

</body>

效果：

折叠的面板：

<!-- 简单的带折叠的面板-->

<div class="panel-group" id="panel_group">

    <div class="panel panel-default">

        <div class="panel-heading" data-toggle="collapse" data-target="#collapse1" data-parent="#panel_group">

            <h4 class="panel-title">清洁套装</h4>

        </div>

        <div id="collapse1" class="panel-collapse collapse in">

            <div class="panel-body">

                aaaa

            </div>

        </div>

    </div>

    <div class="panel panel-default">

        <div class="panel-heading" data-toggle="collapse" data-target="#collapse2" data-parent="#panel_group">

            <h4 class="panel-title">卡壳被子</h4>

        </div>

        <div id="collapse2" class="panel-collapse collapse">

            <div class="panel-body">

                bbbbb

            </div>

        </div>

    </div>

</div>

bootstrap-面板、modal的更多相关文章

  1. 解决select2在bootstrap的modal中默认不显示的问题

    在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题.代码解决如下: ...

  2. bootstrap 模态 modal 小例子

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  3. 利用bootstrap的modal组件自定义alert，confirm和modal对话框

    由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...

  4. Bootstrap面板

    前面的话 面板(Panels)是Bootstrap框架新增的一个组件,某些时候可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以使用面板组件.本文将详细介绍Bootstrap面板 基础面板 ...

  5. bootstrap 模态 modal 小例子【转】

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  6. 044——VUE中组件之使用内容分发slot构建bootstrap面板panel

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 【bootstrap】modal模态框的几种打开方法+问题集锦

    第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...

  8. bootstrap的modal弹窗，在多层窗口关闭时只会关闭自窗口，不再关闭父窗口

    bootstrap多层modal弹窗时.当子窗口关闭时,所有父窗口一起关闭. 原因是bootstrap在窗口关闭事件委托时,委托给所有窗口. 如源码: this.$element.on('click. ...

  9. 学会用bootstrap的modal和carousel

    bootstrap框架提供了很多好用的javascript组件,可以很方便的实现常用的js效果,比如点击弹出一个div(modal).下拉菜单.旋转木马(carousel或slider),非常适合前端 ...

  10. 详解Bootstrap面板组件

    面板组件主要作用是用来处理一些其他组件无法完成的功能,在不同的版本中具有不同的源码: LESS:panels.less SASS:_panels.scss 基础面板非常简单,就是一个div容器中运用了 ...

随机推荐

  1. iOS开发UI篇—Quartz2D简单使用(二)

    iOS开发UI篇—Quartz2D简单使用(二) 一.画文字 代码: // // YYtextview.m // 04-写文字 // // Created by 孔医己 on 14-6-10. // ...

  2. 制造业如何基于BPM做供应链管理？

    公司介绍深圳市吉祥腾达科技有限公司是中国网络产业的开航者,是中国无线网络领域的首批开拓者之一.历经10年的开拓创新,已经形成了拥有自主研发的全面产品线. 为了使公司物流.资金流和信息流实现优化整合,腾 ...

  3. RichTextBox文字处理控件属性介绍

    RichTextBox控件是一种既能够输入文本. 又能够修改文本的文字处理控件, 与TextBox控件比较, RichTextBox控件的文字处理功用更加丰厚, 不只能够设定文字的色彩. 字体, 还具 ...

  4. kernel source reading notepad

    __init ,标记内核启动时所用的初始化代码,内核启动完成后就不再使用.其所修饰的内容被放到.init.text section中 __exit,标记模块退出代码,对非模块无效 to be cont ...

  5. Dooioo Deal

    using AnfleCrawler.Common; using System; using System.Collections.Generic; using System.Linq; using ...

  6. Python开发入门与实战8-基于Java的集成开发环境

    8. 基于Java的Python的集成开发环境 目前为止我们所有的代码和例子都是通过Notepad文本编辑器来实现的,实际项目开发中这种编码模式效率较低(大虾除外),使用IDE集成开发环境常常大幅度的 ...

  7. Python 中下划线

    1. 作为一个名称:在代码中使用一个名称,但是在后面的代码中不再会使用到的时候,就可以使用_作为临时名称. n = 42 for _ in range(n): do_something() 2. 名称 ...

  8. Java类与对象——几个课堂例子的总结及作业

    作业:使用类的静态字段和构造函数,我们可以跟踪某个类所创建对象的个数.请写一个类,在任何时候都可以向它查询“你已经创建了多少个对象?”. 源代码: import java.util.Scanner; ...

  9. JS rem 设置

    (function () { var docEl = document.documentElement; var resize = 'orientationchange' in window ? 'o ...

  10. mysql-5.6.17-win32免安装版配置

    下载mysql-5.6.17-win32:官网下载地址百度   解压到自定义目录,我这里演示的是D:\wamp\mysql\   复制根目录下的my-default.ini,改名为my.ini,my. ...