Bootstrap3.0学习培训笔记之独特的实际效果（显示

日期：2021-01-20 类型：科技新闻 

关键词：小程序 活动，微信小程序demo，微信小程序游戏开发价格，手机小程序怎么做，视频播放微信小程序

本文学习培训的內容关键以下所示：

1.关掉按钮

2.Carets

3.迅速设定波动

4.內容地区垂直居中

5.消除波动

6.显示信息或掩藏內容

7.对于显示屏阅读文章器的內容

8.照片更换

9.总结

关掉按钮

根据应用1个代表关掉的标志，能够用来让方式会话框和警示框消退。


拷贝编码
编码以下:
<button type="button" class="close" aria-hidden="true">&times;</button>

Carets

应用插进符表明往下拉的作用和方位。请留意，默认设置插进符会全自动翻转在dropup菜单。


拷贝编码
编码以下:
<span class="caret"></span>

迅速设定波动

过这两个class让网页页面元素上下波动。!important被用来防止一些难题。还可以像mixin1样应用这两个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。还可以像mixin1样应用。


拷贝编码
编码以下:
<div class="clearfix">...</div>

拷贝编码
编码以下:
// Mixin itself .clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } } // Usage as a Mixin .element { .clearfix(); }

显示信息或掩藏內容

根据.show和.hidden能够强制性显示信息或掩藏任1网页页面元素（包含在显示屏阅读文章器上）。这两个class应用了!important以免矛盾。这两个class只能做用于块级元素，还可以做为mixin应用。

.hide 依然能够用，可是它不可以危害显示屏阅读文章器，而且从v3.0.1版本号刚开始已将被标识为不提议应用。请应用.hidden 或 .sr-only。

另外，可使用.invisible切换仅有1个元素的可见性，这代表着它的显示信息不被改动，依然能够危害文本文档流中的元素。


拷贝编码
编码以下:
<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能够对于除显示屏阅读文章器以外的全部机器设备掩藏1个元素。此class还能够做为mixin应用。


拷贝编码
编码以下:
<a class="sr-only" href="#content">Skip to main content</a>

拷贝编码
编码以下:
// Usage as a Mixin .skip-navigation { .sr-only(); }

照片更换

应用.text-hideclass（也可做为mixin应用）能够将网页页面元素所包括的文字內容更换为情况图。


拷贝编码
编码以下:
<h1 class="text-hide">Custom heading</h1>

拷贝编码
编码以下:
// Usage as a Mixin .heading { .text-hide(); }

总结

本文之中关键是讲了1些较为独特的实际效果。例如显示信息掩藏、清除波动、关掉按钮等。在1些特点的状况下，将会会有效到。

上一篇：Dreamweavr如何给网插进版权标记的独特标识符? 返回下一篇：没有了