面板：

<!--

    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. CSS3制作漂亮的照片墙

    CSS3可以做动画大家肯定都是耳熟能详的了,但是大家有木有巧妙的利用这一个功能来制作一款漂亮的照片墙呢? 那么今天我们就利用CSS3动画这一特性来一起制作漂亮的照片墙吧! 第一部分:HTML 这里我们 ...

  2. mysql常用语句、命令（增删改查功能）

    修改数据库的字符集    mysql>use mydb    mysql>alter database mydb character set utf8;创建数据库指定数据库的字符集    ...

  3. Appcan 3.2 Switch操作

    Appcan3.0,有了很多不错的东西,但官方的文档还是那么的不靠谱. 我将记录下,我学习到的东西. 显示2个switch <div class="ub ub-pe"> ...

  4. Java in a Nutshell学习笔记

    1, bytecode永远是大段 2,其它语言要在java里运行,要么实现类似于javac的编译器,把该语言解释成为class文件.要么,直接重新实现JVM,直接解释该语言3,Java和C++区别: ...

  5. WP8.1 Study18:动态磁贴

    一.前言 动态磁贴在WindowsPhone8.1和Windows8.1都是其特色,有人喜欢有人讨厌,不过我觉得还是挺好的,可以让使用者很快知道App内的内容和吸引使用者打开App.下面来学习下怎样添 ...

  6. warning: incompatible implicit declaration of built-in function ‘exit’

    出现这个错误,一般是程序中某个函数没有include相关的文件. EG. 出现这个错误是因为要使用exit()应该包含stdlib.h文件

  7. Android图片加载与缓存开源框架：Android Glide

    <Android图片加载与缓存开源框架:Android Glide> Android Glide是一个开源的图片加载和缓存处理的第三方框架.和Android的Picasso库类似,个人感觉 ...

  8. C++ using namespace std（转载）

    转载自http://www.kuqin.com/language/20080107/3532.html 感谢这位大神的解答! 以下的内容摘抄自转载的文章里面的部分内容. 早些的实现将标准库功能定义在全 ...

  9. wndows程序设计之书籍知识与代码摘录-封装一个类似printf的messagebox

    //----------------------------------------- //本程序展示了如何实现MessageBoxPrintf函数 //本函数能像printf那样格式化输出 //摘录 ...

  10. tensorflow1

    特征: 1 灵活 2 可移植性 3 和研究/生产联系 4 自动求导 5 语言选择:python,严谨的c++接口:未来扩展更多 6 最大性能化