Bootstrap3.0学习第八轮
Bootstrap3.0学习第八轮(工具Class)
前言
阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html
本文学习的内容主要如下所示:
关闭按钮
通过使用一个象征关闭的图标,可以用来让模式对话框和警告框消失。
<button type="button" class="close" aria-hidden="true">×</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();
}
总结
本文当中主要是讲了一些比较特殊的效果。比如显示隐藏、消除浮动、关闭按钮等。在一些特性的情况下,可能会有用到。
Bootstrap3.0学习第八轮的更多相关文章
- Bootstrap3.0学习第八轮(工具Class)
详情请查看http://aehyok.com/Blog/Detail/14.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...
- Bootstrap3.0学习14
Bootstrap3.0学习第十四轮(分页.徽章) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/340 ...
- Bootstrap3.0学习第六轮(表单)
Bootstrap3.0学习第六轮(表单) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.h ...
- Bootstrap3.0学习第三轮(栅格系统案例)
Bootstrap3.0学习第三轮(栅格系统案例) 前言 在前面的一篇文章当中http://www.cnblogs.com/aehyok/p/3400499.html主要学习了栅格系统的基本原理,以及 ...
- Bootstrap3.0学习第十八轮(JavaScript插件——下拉菜单)
详情请查看 http://aehyok.com/Blog/Detail/25.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:h ...
- Bootstrap3.0学习教程十七:JavaScript插件模态框
这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...
- bootstrap3.0学习笔记记录1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Bootstrap3.0学习(一)
Bootstrap是Twitter退出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...
- Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)
详情请查看http://aehyok.com/Blog/Detail/16.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...
随机推荐
- C#命令模式-设计模式学习
命令模式(Command Pattern) 概述 在软件系统中,“行为请求者”与“行为实现者”通常呈现一种“紧耦合”.但在某些场合,比如要对行为进行“记录.撤销/重做.事务”等处理,这种无法抵御变 ...
- 【转】Android 常用 adb 命令总结
原文地址:http://testerhome.com/topics/2565 针对移动端 Android 的测试, adb 命令是很重要的一个点,必须将常用的 adb 命令熟记于心, 将会为 Andr ...
- root运行/media可运行文件权限不够,chmod改动权限无效
http://blog.csdn.net/pipisorry/article/details/39649699 问题: 我想运行media目录下自己写的某个程序,但无法运行? 1. 于是我以root的 ...
- input的width和padding-left同时存在时IE兼容问题
总的来说,text-indent不影响元素的最终宽度但是有兼容性问题,padding-left在中国主流浏览器IE低版本下影响最终宽度,但在chrome和firefox下不影响宽度,但是可以通过CSS ...
- C#中使用ref 和 out 的一点认识
ref 通常我们向方法中传递的是值,方法获得的是这些值的一个拷贝,然后使用这些拷贝,当方法运行完毕后,这些拷贝将被丢弃,而原来的值不会受到影响. 这种情况是通常的,当然还有另外一种情况,我们向方法传递 ...
- SQL_修改表结构
***********************************************声明*************************************************** ...
- IT见解
IT见解 北京海淀区 2014-10-18 张俊浩 *域名的市值在走低,因其功能被新浪.腾讯微博.微信大V这种账号所代替 *小米将自己定位为互联网公司,而不是手机公司 *手机不远的未来会成为公共 ...
- Nagios监控lvs服务
1在lvs server上安装nrpe客户端: 1.1,rpm方式安装nrpe客户端 下载地址:http://download.csdn.net/detail/mchdba/7493875 [root ...
- 快速构建Windows 8风格应用10-设备方向
原文:快速构建Windows 8风格应用10-设备方向 本篇博文主要介绍常用支持Windows 8操作系统设备的方向.如何获取当前设备方向.DisplayProperties类. 常用支持Window ...
- SQL点滴21—几个有点偏的语句
原文:SQL点滴21-几个有点偏的语句 SQL语句是一种集合操作,就是批量操作,它的速度要比其他的语言快,所以在设计的时候很多的逻辑都会放在sql语句或者存储过程中来实现,这个是一种设计思想.但是今天 ...