面板：

<!--

    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. Spring 7大功能模块的作用[转]

    核心容器(Spring core) 核心容器提供Spring框架的基本功能.Spring以bean的方式组织和管理Java应用中的各个组件及其关系.Spring使用BeanFactory来产生和管理B ...

  2. HVTableView 分享组

    HVTableView HVTableView是UITableView(带有展开/折叠功能)的子集,可以方便地用在很多app中.开发者可以使用展开/折叠列表而不用为每个单元格创建一个详细的viewCo ...

  3. CodeForces 360E Levko and Game（Codeforces Round #210 (Div. 1)）

    题意:有一些无向边m条权值是给定的k条权值在[l,r]区间可以由你来定,一个点s1 出发一个从s2出发  问s1 出发的能不能先打到f 思路:最短路. 首先检测能不能赢 在更新的时候  如果对于一条边 ...

  4. js异步加载

    默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页 ...

  5. C# 顺序高斯（Gauss）消去法计算一元多次方程组

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. Android Listview & Adapter

    Listview主要有两个职责: 将数据填充到布局 处理用户的选择点击等操作 列表的显示需要三个元素: ListVeiw 用来展示列表的View 适配器(Adapter) 用来把数据映射到ListVi ...

  7. Volley框架的使用

    所谓Volley,它是2013年Google I/O上发布的一款网络框架,基于Android平台,能使网络通信更快,更简单,更健全. 它的优点:(1)默认Android2.3及以上基于HttpURLC ...

  8. 一些常用的vim设置

    以下内容皆来源于网络,感谢原作者.如果引用出处错误,请告知以便修改. 1. vim的几种模式和按键映射 转载自:[1] Map是Vim强大的一个重要原因,可以自定义各种快捷键,用起来自然得心应手.vi ...

  9. MAC上python+Eclipse+pydev环境搭建

    转自:http://www.cnblogs.com/Bonker/p/3584707.html 本文重点介绍使用Eclipse+pydev插件来写Python代码,  以及在Mac上配置Eclipse ...

  10. 【LeetCode OJ】Convert Sorted List to Binary Search Tree

    Problem Link: http://oj.leetcode.com/problems/convert-sorted-list-to-binary-search-tree/ We design a ...