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>
![](https://common.cnblogs.com/images/copycode.gif)
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
} // Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}
![](https://common.cnblogs.com/images/copycode.gif)
不要用于导航条
如果是用于对齐导航条上的组件,请务必使用
.navbar-left
或.navbar-right
。查看导航条文档以获取详情。
内容区域居中
将页面元素设置为 display: block
并通过设置margin
使其居中。可以作为mixin或class使用。
<div class="center-block">...</div>
![](https://common.cnblogs.com/images/copycode.gif)
// 作为classe使用
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
} // 作为mixin使用
.element {
.center-block();
}
![](https://common.cnblogs.com/images/copycode.gif)
清除浮动
使用.clearfix清除任意页面元素的浮动。我们使用了Nicolas Gallagher的the micro clearfix。也可以像mixin一样使用。
<div class="clearfix">...</div>
![](https://common.cnblogs.com/images/copycode.gif)
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
} // Usage as a Mixin
.element {
.clearfix();
}
![](https://common.cnblogs.com/images/copycode.gif)
显示或隐藏内容
通过.show
和 .hidden
可以强制显示或隐藏任一页面元素(包括在屏幕阅读器上)。这两个class使用了!important
以避免冲突。这两个class只能做用于块级元素,也可以作为mixin使用。
.hide 仍然可以用,但是它不能影响屏幕阅读器,并且从v3.0.1版本开始已将被标记为不建议使用。请使用.hidden 或 .sr-only。
此外,可以使用.invisible切换只有一个元素的可见性,这意味着它的显示不被修改,仍然可以影响文档流中的元素。
<div class="show">...</div>
<div class="hidden">...</div>
![](https://common.cnblogs.com/images/copycode.gif)
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.invisible {
visibility: hidden;
} // Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}
![](https://common.cnblogs.com/images/copycode.gif)
针对屏幕阅读器的内容
使用.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 ...
随机推荐
- 队列 <queue>
STL: 队列中pop完成的不是取出最顶端的元素,而是取出最低端的元素.也就是说最初放入的元素能够最先被取出(这种行为被叫做FIFO:First In First Out,即先进先出). queue: ...
- asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试
1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...
- Unity3D环境GLSL shaders书面 — 固体参数
我猜你一定能写一个转型不只是随机颜色显示红色shader.你需要从Unity编辑器shader传递参数. 本文中,我们将使用shader的Properties和GLSL特殊的变量类型uniforms. ...
- 【SSH三框架】Struts2第一章的基础:第一次写Struts2规划
今年八月,当已经SSH三架完成学业.然后,他感动Android开展.三个框架已经很长的时间做无用的东西.所以,如果你想花三四天的时间来复习一下,写在博客. 附带SSH整个jar包网盘下载:http:/ ...
- Net下无敌的ORM
Dapper ORM 用法—Net下无敌的ORM http://www.renfb.com/blog/2011/Article/335 假如你喜欢原生的Sql语句,又喜欢ORM的简单,那你一定会喜欢上 ...
- root运行/media可运行文件权限不够,chmod改动权限无效
http://blog.csdn.net/pipisorry/article/details/39649699 问题: 我想运行media目录下自己写的某个程序,但无法运行? 1. 于是我以root的 ...
- Android 平台 HTTP网速測试 案例 API 分析
作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/25996817 工信部规定的网速測试标准 : 除普通网页測速 ...
- ssh 自动登录
工作中经常会有这样的需求场景,因为要在其它电脑上做操作, 需要从PC A ssh 到 PC B,PC A 可能是自己的工作机,PC B 可能是服务器.一般会使用 SSH 登录到 server 上再进行 ...
- curl 简单使用
cURL -- Command Line URL viewer -u username:password 以 Basic 方式发送用户名和密码 -d 以 POST 方式发送数据 -X 支持其它动词, ...
- [C#]设置或取消开机启动(注册表形式)
原文:[C#]设置或取消开机启动(注册表形式) 使用代码: 代码效果: