面板：

<!--

    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兼容各浏览器的线型渐变方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. golang——channel笔记

    1.for i := range channel { //... } 相当于 循环进行 i<-channel,直至close(channel) 2. · 给一个 nil channel 发送数据 ...

  3. Javascript中封装window.open的例子

    对window.open进行封装, 使其更好用, 且更兼容, 很多人说window.open不兼容,其实不是, 因为不能直接执行, 必须通过用户手动触发才行;看代码: 代码如下 复制代码 var op ...

  4. C++指针比较的问题

    在C++里面,指针的比较是要保障type-safe的,也就是说,这两个指针必须是convertible的:从一个指针能够直接转换到另一个指针(有中间路径不算,不然都往void*转没完没了),顺序不限 ...

  5. UIImageView变灰

    1.UIImageView圆角 CALayer *l = [cell.imgAvatarImage layer]; [l setMasksToBounds:YES]; [l setCornerRadi ...

  6. Nice Sequence_线段树***

    Description Let us consider the sequence a1, a2,..., an of non-negative integer numbers. Denote as c ...

  7. hadoop删除节点。

    hadoop节点摘除操作: 1.确定exclude文件的位置. <property> <name>dfs.hosts.exclude</name> <valu ...

  8. 以ls命令为实例介绍命令基本格式

    登陆Linux命令行会显示一行字符,例如[root@localhost  ~ ]#, 其中root表示当前登陆用户,localhost表示主机名,~显示的是当前路径,(-表示当前用户的家目录),#表示 ...

  9. LeetCode() Issomorphic Strings

    bool isIsomorphic(string s, string t) { int size=s.size(); if (size==0) return true; char ch[128],is ...

  10. 三个loading小动画实例

    直接贴代码: <!DOCTYPE html><html><head>    <meta charset="utf-8">    &l ...