触发模态弹出窗两种方法

方法一：模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss=""）

注意：

data-toggle必须设置为modal

data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。

方法二：触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性

模态弹出框

Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content,其主要又包括三个部分

弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮

   弹出框主体，一般使用“modal-body”表示，弹出框的主要内容

   弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮

面板----带有头和尾的面板

panel-heading:用来设置面板头部样式

panel-footer：用来设置面板尾部样式

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <div class="panel-footer">作者：大漠</div>
</div>

面板----基础面板

就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置面板主体内容：

<div class="panel panel-default">

    <div class="panel-body"></div>

</div>

自定义列表组

list-group-item-heading:用来定义列表项头部样式

list-group-item-text:用来定义列表项主要内容

带链接的列表组

将ul.list-group使用div.list-group来替换

而li.list-group-item直接用a.list-group-item来替换

带会涨的列表组

只需要在list-group-item中添加<span class="badge"></span>即可

带会长的列表组

只需要在list-group-item中添加<span class="badge"></span>即可

带徽章的列表组

只需要在list-group-item中添加<span class="badge"></span>即可

基础列表组

list-group:列表组容器，常用的Ul元素，当然也可以是ol或者div元素

list-group-item:列表项，常用的是li元素，当然也可以是div元素

媒体对象列表展示

列表展示在写的时候可以使用ul,并在ul上添加类名“media-list”，而在li上使用media

媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分：

     媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容

    媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片

    媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容

    媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选

图片放置位置

<a class="pull-left/right href=“#”>

    <img。。。。>

</a>

媒体对象

容器：用media类名表示

<div class="progress">

    <div class="progress-bar" role="progressbar" aria-valuenow="20%" aria-valuemin="0" aria-valuemax="100">20%</div>

</div>

进度条---带label的进度条

<div class="progress">

    <div class="progress-bar" role="progressbar" aria-valuenow="20%" aria-valuemin="0" aria-valuemax="100">20%</div>

</div>

动态条纹进度条

进度条”progress progress-striped active“

条纹进度条

在 progress类名里面添加progress-striped

progress-bar-info 表示信息进度条

progress-bar-success:表示成功进度条

progress-bar-warning:表示警告进度条

progress-bar-danger:表示错误的进度条

progress-bar-info 表示信息进度条

progress-bar-success:表示成功进度条

progress-bar-warning:表示警告进度条

progress-bar-danger:表示错误的进度条

   progress-bar-info：表示信息进度条，进度条颜色为蓝色

   progress-bar-success：表示成功进度条，进度条颜色为绿色

   progress-bar-warning：表示警告进度条，进度条颜色为黄色

   progress-bar-danger：表示错误进度条，进度条颜色为红色

进度条--基本样式

外容器使用"progress“类名，内容器使用"progress-bar"

<div class="progress">

    <div class="progress-bar"></div>

</div>

进度条---基本样式

Bootstrap框架中也是按这样的方式实现的，他提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。使用方法非常的简单

<div class="progress">

    <div class="progress-bar"></div>

</div>

警示框的链接

可能想在警示框中加入链接地址，用来告诉用户跳到某一个地方或新的页面。Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名，通过“alert-link”样式给链接提供高亮显示

<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> 
    You successfully read 
    <a href="#" class="">this important alert message</a>

可关闭的警示框

大家在平时浏览网页的时候，会发现一些警示框带有关闭按钮，用户一点击关闭按钮就能自动关闭显示的警示框（也就是让警示框隐藏不显示）。在Bootstrap框架中的警示框也具有这样的功能。

  1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。

  2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。

  3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。

Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果：

 1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；

  2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；

  3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；

  4、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。