Bootstrap3.0学习第八轮(工具Class)

 

前言

阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html

本文学习的内容主要如下所示:

1.关闭按钮

2.Carets

3.快速设置浮动

4.内容区域居中

5.清除浮动

6.显示或隐藏内容

7.针对屏幕阅读器的内容

8.图片替换

9.总结

关闭按钮

通过使用一个象征关闭的图标,可以用来让模式对话框和警告框消失。

 <button type="button" class="close" aria-hidden="true">&times;</button>

Carets

使用插入符表示下拉的功能和方向。请注意,默认插入符会自动反转在dropup菜单。

 <span class="caret"></span>

快速设置浮动

过这两个class让页面元素左右浮动。 !important被用来避免某些问题。也可以像mixin一样使用这两个class。

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
} // Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}

不要用于导航条

如果是用于对齐导航条上的组件,请务必使用.navbar-left 或 .navbar-right。查看导航条文档以获取详情。

内容区域居中

将页面元素设置为 display: block并通过设置margin使其居中。可以作为mixin或class使用。

<div class="center-block">...</div>
// 作为classe使用
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
} // 作为mixin使用
.element {
.center-block();
}

清除浮动

使用.clearfix清除任意页面元素的浮动。我们使用了Nicolas Gallagher的the micro clearfix。也可以像mixin一样使用。

<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
} // Usage as a Mixin
.element {
.clearfix();
}

显示或隐藏内容

通过.show 和 .hidden可以强制显示或隐藏任一页面元素(包括在屏幕阅读器上)。这两个class使用了!important以避免冲突。这两个class只能做用于块级元素,也可以作为mixin使用。

.hide 仍然可以用,但是它不能影响屏幕阅读器,并且从v3.0.1版本开始已将被标记为不建议使用。请使用.hidden 或 .sr-only。

此外,可以使用.invisible切换只有一个元素的可见性,这意味着它的显示不被修改,仍然可以影响文档流中的元素。

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.invisible {
visibility: hidden;
} // Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}

针对屏幕阅读器的内容

使用.sr-only可以针对除了屏幕阅读器之外的所有设备隐藏一个元素。此class还可以作为mixin使用。

<a class="sr-only" href="#content">Skip to main content</a>
// Usage as a Mixin
.skip-navigation {
.sr-only();
}

图片替换

使用.text-hide class(也可作为mixin使用)可以将页面元素所包含的文本内容替换为背景图。

<h1 class="text-hide">Custom heading</h1>
// Usage as a Mixin
.heading {
.text-hide();
}

总结

本文当中主要是讲了一些比较特殊的效果。比如显示隐藏、消除浮动、关闭按钮等。在一些特性的情况下,可能会有用到。

本文已更新至http://www.cnblogs.com/aehyok/p/3404867.html

 
 

Bootstrap3.0学习第八轮的更多相关文章

  1. Bootstrap3.0学习第八轮(工具Class)

    详情请查看http://aehyok.com/Blog/Detail/14.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

  2. Bootstrap3.0学习14

    Bootstrap3.0学习第十四轮(分页.徽章)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/340 ...

  3. Bootstrap3.0学习第六轮(表单)

    Bootstrap3.0学习第六轮(表单) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.h ...

  4. Bootstrap3.0学习第三轮(栅格系统案例)

    Bootstrap3.0学习第三轮(栅格系统案例) 前言 在前面的一篇文章当中http://www.cnblogs.com/aehyok/p/3400499.html主要学习了栅格系统的基本原理,以及 ...

  5. Bootstrap3.0学习第十八轮(JavaScript插件——下拉菜单)

    详情请查看 http://aehyok.com/Blog/Detail/25.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:h ...

  6. Bootstrap3.0学习教程十七:JavaScript插件模态框

    这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...

  7. bootstrap3.0学习笔记记录1

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Bootstrap3.0学习(一)

    Bootstrap是Twitter退出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...

  9. Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)

    详情请查看http://aehyok.com/Blog/Detail/16.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

随机推荐

  1. 队列 <queue>

    STL: 队列中pop完成的不是取出最顶端的元素,而是取出最低端的元素.也就是说最初放入的元素能够最先被取出(这种行为被叫做FIFO:First In First Out,即先进先出). queue: ...

  2. asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试

    1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...

  3. Unity3D环境GLSL shaders书面 — 固体参数

    我猜你一定能写一个转型不只是随机颜色显示红色shader.你需要从Unity编辑器shader传递参数. 本文中,我们将使用shader的Properties和GLSL特殊的变量类型uniforms. ...

  4. 【SSH三框架】Struts2第一章的基础:第一次写Struts2规划

    今年八月,当已经SSH三架完成学业.然后,他感动Android开展.三个框架已经很长的时间做无用的东西.所以,如果你想花三四天的时间来复习一下,写在博客. 附带SSH整个jar包网盘下载:http:/ ...

  5. Net下无敌的ORM

    Dapper ORM 用法—Net下无敌的ORM http://www.renfb.com/blog/2011/Article/335 假如你喜欢原生的Sql语句,又喜欢ORM的简单,那你一定会喜欢上 ...

  6. root运行/media可运行文件权限不够,chmod改动权限无效

    http://blog.csdn.net/pipisorry/article/details/39649699 问题: 我想运行media目录下自己写的某个程序,但无法运行? 1. 于是我以root的 ...

  7. Android 平台 HTTP网速測试 案例 API 分析

    作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/25996817 工信部规定的网速測试标准 : 除普通网页測速 ...

  8. ssh 自动登录

    工作中经常会有这样的需求场景,因为要在其它电脑上做操作, 需要从PC A ssh 到 PC B,PC A 可能是自己的工作机,PC B 可能是服务器.一般会使用 SSH 登录到 server 上再进行 ...

  9. curl 简单使用

    cURL -- Command Line URL viewer -u username:password 以 Basic 方式发送用户名和密码 -d 以 POST 方式发送数据 -X 支持其它动词, ...

  10. [C#]设置或取消开机启动(注册表形式)

    原文:[C#]设置或取消开机启动(注册表形式) 使用代码: 代码效果: