HTML5技术

[Bootstrap]7天深入Bootstrap(4)CSS组件 - Never、C(3)

字号+ 作者:H5之家 来源:博客园 2015-09-24 10:02 我要评论( )

默认的警告框是用带有alert样式的div元素容器包含的(p元 素也可以),内部可选地添加一个关闭按钮button元素,关闭按钮要确保设置button元素的属性值data-dismiss="alert", 原因是警告框的关闭功能是通过JavaScri

默认的警告框是用带有alert样式的div元素容器包含的(p元 素也可以),内部可选地添加一个关闭按钮button元素,关闭按钮要确保设置button元素的属性值data-dismiss="alert", 原因是警告框的关闭功能是通过JavaScript检测该属性实现的.

alert-danger(危险红)、alert-success(成功绿)、alert-info(信息蓝)、alert-warning(警告黄)

在警告框中,还对h4、hr、a标签做了处理。组合起来非常酷。

<div> <a href="#" data-dismiss="alert">x</a> <h4>Warning</h4> <hr /> <p>Check your write,or look <a href="#">help</a></p> </div>

 

  

进度条

进度条(Progress bar)是一个比较常见的网页效果,一般用于表示加载、跳转或动作正在执行中的状态

progress用于设置进度条的容器样式,而 progress-bar用于限制进度条的进度(颜色进度)。

progress样式主要是设置进度条容器的背景色、容器高度、 间距等,progress-bar样式在设置进度方面,重要的是设置了进度条的 颜色(即样式的背景色)和过渡效果

除了progress-primary(重点蓝)外,其他4种基本颜色。

bs还为进度条提供 了一种条纹样式,并且不同的颜色可以显示不同的条纹。只是在容器元素上附加 了一个新的progress-striped样式,该样式的实现是利用CSS3的线 性渐变特性linear-gradient来实现的。

bs还提供了一个更炫的动画 样式,即:让条纹动起来。active

堆叠,只要在progress容器内放置多个progress-bar即可实现。

<div> <div>35</div> <div></div> </div>

 

媒体对象

媒体对象(Media object)这是一个抽象的样式,用以构建不同类型的组件。

一组媒体的默认使用方式通常包括如下几个样式:media、 media-object、media-body、media-heading 4个样式,和一个用于控制左右浮动的pull-left(或pull-right)样式。

如果需要将多个媒体进行列表展示的话,则可以利用在ul上应用media-list样式、li上应用media样式来实现。

<ul> <li> <div> <a href="#"> <img src="..." alt="..."> </a> </div> <div> <h4>Media heading</h4> ... </div> </li> </ul>

 

 

列表

大部分的列表组都是由无标记的列表(ul/li)来实现

列表组有2个基本的样式:listgroup和list-group-item。

导航箭头

.list-group-item > .glyphicon-chevron-right { float: right; /* 设置小图标 右浮动 */ margin-right: 5px; /* 小图标在span、label、i元素上设置-15像素的右间距 */ } .list-group-item > .glyphicon + .badge { margin-right: 5px; /* 如果两个图标放在一起显示,则保留5像素的右间距 */ }

 

bs又提供了list-groupitem-heading和list-group-item-text这两个样式,用于开发人员自 定义列表项里的具体内容,其表示的意思分别是:列表项条目的 头部(heading)和主要内容(text)。  

 

<div> <a href="#"> <span>11</span> Cras justo odio </a> <a href="#">Dapibus ac facilisis in</a> <a href="#">Vestibulum at eros</a> <a href="#"> <h4>List group item heading</h4> <p>...</p> </a> </div>

 

 

面板

基础的面板很简单,就是简单在div上应用panel,产生一个具 有边框的文本显示框

又为其定义 了面板头(panel-heading)和面板尾(panel-footer)样式,

除了progress-primary(重点蓝)外,其他4种基本颜色。

一般在使用面板的时候,往往可能会在主区域(panel-body)内放很多内容,比如图片、表格等

带表格的面板

<div> <!-- Default panel contents --> <div>Panel heading</div> <div> <p>...</p> </div> <!-- Table --> <table> ... </table> </div>

 

洼地

洼地(Well)样式的效果和大屏幕展播Jumbotron样式类似, 不同点是well样式有了边框设置,并且默认高度是自适应文本的高度。主要用来实现嵌入在网页中。

well样式也提供了不同大小的样式(主要是panding和圆角大小),分别是:well-lg和well-sm

内容太长会超出边界!

 

主题

 3.x版本中还新增了一个bootstraptheme.css文件,该文件并没有提供什么新的功能,仅是针对一些常用的CSS组件进行了增强。

但是theme默认并没有对所有的CSS组件都进行增强,而是针对9个方面的组件进行了增强:btn按钮、缩略图、 下拉菜单、导航条、警告框、进度条、列表组、面板和well

theme文件不是必须要引用的,如果喜欢这种风格才引用它;

如果要定制自己的风格,则可以引用自己的theme名 称,比如bootstrao-theme-flatui.css。

但是一定要注意,该文件一定要在bootstarp.min.css文件之后才能引用,否则会覆盖默认的效果。

 

本节地址:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Omi树组件omi-tree编写指南 - 【当耐特】

    Omi树组件omi-tree编写指南 - 【当耐特】

    2017-05-02 15:04

  • 对于Bootstrap的介绍以及如何使用 - novai-L

    对于Bootstrap的介绍以及如何使用 - novai-L

    2017-04-29 09:00

  • 在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    在Delphi下使用迅雷APlayer组件进行免注册开发 - Delphi力量

    2017-04-28 15:00

  • JS组件系列——自己动手封装bootstrap-treegrid组件 - 懒得安分

    JS组件系列——自己动手封装bootstrap-treegrid组件 - 懒得安分

    2017-04-28 14:02

网友点评