常用Bootstrap工具类

在学习过前面的Bootstrap CSS样式以后,你肯定对Bootstrap强大的样式库有了较深的了解,不得不说twbs团队考虑得非常周到,还提供了一些其他的Bootstrap工具类,方便大家在网站建设的过程中加快速度,减少不必要的编码投入。

关闭按钮Bootstrap工具类

如果你在自己的项目中引入了alert模块或者modal模块,那么你就会需要用到这个关闭按钮工具类,这个类可以让你方便地关闭这两种模块,具体代码如下:<button type="button" class="close" aria-hidden="true">&times;</button>

下拉按钮Bootstrap工具类

如果你要用到二级菜单、下拉框或者其他一切与下拉有关的模块,也可以快速调用下拉工具类,它会马上生成一个下拉图标,非常方便:<span class="caret"></span>

快速设置元素浮动Bootstrap工具类

你是不是有碰到过想要对某个元素设置浮动(float),但又不得不到CSS中对其进行设置的情况?
Bootstrap也同样考虑到了这个情况,现在你只需要在元素的样式中引入浮动类即可。<div class="pull-left">...</div><div class="pull-right">...</div>

设置元素居中对齐Bootstrap工具类

当你想要让某个元素居中于父元素时,往往你都需要设置margin为auto,现在Bootstrap能够让你快速实现这个效果,只需要引入center-block样式即可:<div class="center-block">...</div>

清除浮动Bootstrap工具类

如果你在之前的元素布局中用到了浮动(float),那么为了保证子元素不溢出父容器,就必然要用到清除浮动的样式。
其实清除浮动是个相当麻烦的操作,所以很多人往往会在CSS Reset中引入这个类,Bootstrap同样也考虑了这个问题,并且引入了清除浮动类clearfix,使用起来也很方便:<div class="clearfix">...</div>

隐藏和显示内容Bootstrap工具类

这两个类非常直观明了,就是隐藏或者显示你想要的元素,可以通过JS来控制调用这两个元素以达到某种交互效果:<div class="show">...</div> <div class="hidden">...</div>

写在文章最后

以上的这些Bootstrap工具类都是以往前端工程师在编码过程中经常要用到的样式,Bootstrap都将其很好地整合了进来。
当然,如果你也有自己想要添加的工具类,也可以封装到自己的自定义Bootstrap中,以供自己重复使用。


发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Grow your business fast with

Suku