bootstrap-16

进度条----基本样式：

　　Bootstrap框架中对于进度条提供了一个基本的样式，一个100%宽度的背景色，然后高亮颜色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，他的子元素设置一个宽度。

　　使用方法：

　　　　Bootstrap框架中也是按照这样的方式实现的。它提供了两个容器，外容器使用"progress"样式，子容器使用"progress-bar"样式。其中progress用来设置进度条的容器样式，而progress-bar用来限制进度条的进度。

<div class="progress">

       <div class="progress-bar" style="width:40%"></div>

</div>

　　结构优化：虽然这样实现了基本进度条效果，但是对于残障人员浏览网页有点困难，所以我们可以将结构做的好些

<div class="progress">

    <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">

        <span class="sr-only">40% Complete</span>

    </div>

</div>

　　1.role属性作用：告诉搜索引擎这个div的作用是进度条；

　　2.aria-valuenow="40"属性作用：进度条的进度是40%；

　　3.aria-valuemin="0"属性作用：进度条的最小值是0%；

　　4.aria-valuemax="100"属性作用：进度条的最大值是100%；

进度条----彩色进度条：

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

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

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

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

<div class="progress">

    <div class="progress-bar progress-bar-success" style="width:40%"></div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-info" style="width:60%"></div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-warning" style="width:80%"></div>

</div>

<div class="progress">

    <div class="progress-bar progress-bar-danger" style="width:50%"></div>

</div>

条纹进度条----条纹进度条：

　　在Bootstrap框架中除了提供了彩色进度条之外，还提供了一种条纹进度条，这种条纹进度条采用css3的线性渐变来实现，并未借助任何图片，使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上添加类名“progress-striped”,当然，如果你要让你的进度条条纹像彩色进度一样，具有彩色效果，你只需要在进度条上添加相应的颜色类名：

<div class="progress progress-striped">

    <div class="progress-bar progress-bar-success" style="width:40%"></div>

</div>

<div class="progress progress-striped">

    <div class="progress-bar progress-bar-info" style="width:60%"></div>

</div>

<div class="progress progress-striped">

    <div class="progress-bar progress-bar-warning" style="width:80%"></div>

</div>

<div class="progress progress-striped">

    <div class="progress-bar progress-bar-danger" style="width:50%"></div>

</div>

进度条----动态条纹进度条：

　　使用方法：“progress progress-striped”两个类的基础上再加入“active”类名。如下代码：

<div class="progress progress-striped active">

    <div class="progress-bar progress-bar-success" style="width:40%"></div>

</div>

　　注意：要让条纹进度条动起来，就需要让"progress-stripes"和"active"同时运用，不然条纹进度条是不具备动效效果。

进度条----层叠进度条：

　　将不同状态的进度条放置在一起，按水平方式排列：

<div class="progress">

    <div class="progress-bar progress-bar-success" style="width:20%"></div>

    <div class="progress-bar progress-bar-info" style="width:10%"></div>

    <div class="progress-bar progress-bar-warning" style="width:30%"></div>

    <div class="progress-bar progress-bar-danger" style="width:15%"></div>

</div>

进度条----带Label的进度条

　　有很多时候，需要在进度条中直接用相关的数值向用户传递完成的进度条，在Bootstrap就为大家考虑了这种使用场景。

<div class="progress">

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

</div>

媒体对象：

　　在web页面或者移动页面制作中，常常看见这样的效果，左边居左，内容居右排列。我们常常把这样的效果成为媒体对象，可以说他是一种抽象的样式，可以用来构建不同类型的组件。

媒体对象----默认的媒体对象：

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

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

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

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

媒体对象----媒体对象的嵌套：

<div class="media">

    <a class="pull-left" href="#">

        <img class="media-object" src="…" alt="...">

    </a>

    <div class="media-body">

        <h4 class="media-heading">Media Heading</h4>

        <div>…</div>

        <div class="media">

            <a class="pull-left" href="#">

                <img class="media-object" src="…" alt="...">

            </a>

            <div class="media-body">

                <h4 class="media-heading">Media Heading</h4>

                <div>…</div>

                <div class="media">

                    <a class="pull-left" href="#">

                        <img class="media-object" src="…" alt="...">

                    </a>

                    <div class="media-body">

                        <h4 class="media-heading">Media Heading</h4>

                        <div>...</div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

媒体对象----媒体对象列表：

　　Bootstrap框架中提供了一个列表展示的效果，在写结构的时候可以使用ul，并且在ul上添加类名“media-list”,而在li上使用“media”,

<ul class="media-list">

    <li class="media">

        <a class="pull-left" href="#">

            <img class="media-object" src=" " alt="...">

        </a>

        <div class="media-body">

            <h4 class="media-heading">Media Header</h4>

            <div>…</div>

        </div>

    </li>

    <li class="media">…</li>

    <li class="media">…</li>

</ul>

列表组：列表组时Bootstrap框架中新增的一个组件，可以制作列表清单、垂直导航效果，也可以匹配其他的组件制作出更漂亮的组件，由于其在Bootstrap是一个独立的组件，所以也对应有自己的独立源码。

列表组----基础列表组：

　　基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分：

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

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

<ul class="list-group">

    <li class="list-group-item">揭开CSS3的面纱</li>

    <li class="list-group-item">CSS3选择器</li>

    <li class="list-group-item">CSS3边框</li>

    <li class="list-group-item">CSS3背景</li>

    <li class="list-group-item">CSS3文本</li>

</ul>

列表组----带徽章的列表组：

　　带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果，具体做法很简单，只需要在list-group-item中添加徽章组件badge

<ul class="list-group">

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

        <span class="badge">13</span>揭开CSS3的面

    </li>

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

        <span class="badge">456</span>CSS3选择器

    </li>

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

        <span class="badge">892</span>CSS3边框

    </li>

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

        <span class="badge">90</span>CSS3背景

    </li>

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

        <span class="badge">1290</span>CSS3文本

    </li>

</ul>

列表组-----带链接的列表组：

<ul class="list-group">

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

        <a href="##">揭开CSS3的面</a>

    </li>

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

        <a href="##">CSS3选择器</a>

    </li>

    ...

</ul>

列表组-----自定义列表组：

　　Bootstrap框架在链接列表组的基础上新增了两个样式：

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

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

<div class="list-group">

    <a href="##" class="list-group-item">

        <h4 class="list-group-item-heading">图解CSS3</h4>

        <p class="list-group-item-text">...</p>

    </a>

    <a href="##" class="list-group-item">

        <h4 class="list-group-item-heading">Sass中国</h4>

        <p class="list-group-item-text">...</p>

    </a>

</div>

列表项----列表项的状态设置：

　　Bootstrap框架也给组合列表项提供了状态效果，特别是链接列表组。在列表组中只需要在对应的列表项中添加类名：

　　　　active disabled

列表组----多彩列表组：

　　list-group-item-success:成功，背景色绿色

　　list-group-item-info:信息，背景色蓝色

　　list-group-item-warning:警告，背景色为黄色

　　list-group-item-danger:错误，背景色为红色

<div class="list-group">

    <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>

    <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>

    <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>

    <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>

    <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>

</div>

面板：是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。

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

<div class="panel panel-default">

    <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>

</div>

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

　　Bootstrap为了丰富面板的功能，特意为面板增加面板头部和页面尾部的效果。

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

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

面板----彩色面板：

　　在Bootstrap框架面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板：

　　panel-primary:重点蓝

　　panel-success:成功绿

　　panel-info:信息蓝

　　panel-warning:警告黄

　　panel-danger:危险红

<div class="panel panel-default">

    <div class="panel-heading">图解CSS3</div>

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

    <div class="panel-footer">作者：大漠</div>

</div>

<div class="panel panel-primary">…</div>

<div class="panel panel-success">…</div>

<div class="panel panel-info">…</div>

<div class="panel panel-warning">…</div>

<div class="panel panel-danger">…</div>

面板----面板中嵌套表格

　　一般情况下可以把面板理解为一个区域，在使用面板的时候，都会在panel-body放置需要的内容，可能是图片、表格或者列表等。来看看面板中嵌套表格和列表组的一个效果。

<div class="panel panel-default">

    <div class="panel-heading">图解CSS3</div>

    <div class="panel-body">

    <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性

    </p>

    <table class="table table-bordered">

        <thead>

            <tr>

                <th>＃</th>

                <th>我的书</th>

                <th>发布时间</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>《图解CSS3》</td>

                <td>2014-07-10</td>

            </tr>

        </tbody>

    </table>

    </div>

    <div class="panel-footer">作者：大漠</div>

</div>

面板----面板中嵌套列表组
　　

<div class="panel panel-default">

    <div class="panel-heading">图解CSS3</div>

    <div class="panel-body">

        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性

        </p>

        <ul class="list-group">

            <li class="list-group-item">我是列表项</li>

            <li class="list-group-item">我是列表项</li>

            <li class="list-group-item">我是列表项</li>

        </ul>

    </div>

    <div class="panel-footer">作者：大漠</div>

</div>

bootstrap-16的更多相关文章

第二百四十二节，Bootstrap列表组面板和嵌入组件
Bootstrap列表组面板和嵌入组件学习要点: 1.列表组组件 2.面板组件 3.响应式嵌入组件本节课我们主要学习一下 Bootstrap 的三个组件功能:列表组组件.面板组件. 响应式嵌入组 ...
Bootstrap入门（二十二）组件16：列表组
Bootstrap入门(二十二)组件16:列表组列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容. 1.默认样式列表组 2.加入徽章 3.链接 4.禁用的列表组 5. ...
AngularJS快速入门指南16：Bootstrap
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
Bootstrap系列 -- 16. 文本域textarea
文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度.但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性.因为Bootstrap框 ...
Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...
基于Metronic的Bootstrap开发框架经验总结（16）-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...
16、响应式布局和BootStrap 全局CSS样式知识点总结-part3
1.响应式工具 ①可用的类 <div class="container"> <a href="#" class="visible-x ...
翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 3
原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
基于Metronic的Bootstrap开发框架经验总结（14）--条码和二维码的生成及打印处理
在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理 ...
springmvc4 mybatis 整合框架源码 bootstrap
A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单下载地址 ; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类 ...

随机推荐

Ionic的跨域问题
跨域大家都不陌生,但最近一直遇到一个坑,也是自身对ajax和angular的不深入造成,所以记录一笔,下次遇到绕过. 参考过:http://ionichina.com/topic/54f051698c ...
Spring(3)
一.Spring容器 Spring 提供了两种类型的IOC容器(后面还会讲到AOP容器): (1)BeanFactory:IOC容器的基本实现,是Spring框架的基础设施,面向Spring的本身 ( ...
dll学习
Dll:动态链接库动态链接库(dll)是包含共享函数库的二进制文件,可以被多个应用程序同时使用.建立应用程序的可执行文件时,不必将DLL连接到应用程序中,而是在运行时动态装载DLL,装载时DLL被映 ...
Asp.net MVC与Javascript
特性验证首先:在web.config文件中<appSettings>节点内添加<add key="ClientValidationEnabled" value= ...
Asp.net 事件管道
1.BeginRequest 2.AuthenticateRequest 验证请求,开始检查用户的身份,一般是获取请求的用户信息 3.PostAuthenticateRequest 用户身份检查完 ...
同上遍历obj的值来定义当前的后台数据在页面的定位
function getlistRoom(obj) { //obj就是通过ajax传过来的 data for (var i = 0; i < obj.length; i++) {//遍历数据 v ...
通过Request对象对cookie的设置、获取
<html> <head></head> <body> <% request.setCharacterEncoding("UTF-8&q ...
jquery.get()
1.获取当前jquery对象匹配到的dom元素 2.语法: jqueryObject.get([index]) //jQueryObject[index]等价于jQueryObject.get(ind ...
C# FTP/SFTP文件传输控件FTP for .NET/.NET CF 详细介绍
FTP for .NET将FTP客户端功能添加到您的应用程序之中..NET控件的FTP支持所有常用的FTP服务器以及代理服务器,包括可扩展的目录解析.同步以及异步操作.主动与被动模式.以VB.NET与 ...
PyAutoGUI-python版的autoit/AHK
简单介绍各个图形界面自动操作的python库,类似按键精灵\autoit\ahk(autohotkey)等等这些自动化工具.这类python库不是只是用来实现自动游戏之类的程序,业界也用这些库来做GU ...

bootstrap-16

bootstrap-16的更多相关文章

随机推荐

热门专题