BootstrapBootstrap协理类

前面的话

  Bootstrap提供了一组织工作具类,用于支援项目标付出。本文将详细介绍Bootstrap支持类

 

文本色

  通过颜色来体现意图,Bootstrap
提供了一组织工作具类。那个类能够使用于链接,并且在鼠标经过时颜色能够还足以加深,就如暗中同意的链接一样

.text-muted:提示,使用浅灰色(#777)
.text-primary:主要,使用蓝色(#337ab7)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)

<div>
    <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
    <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>

 

背景色

  和田地文本颜色类一样,使用任意情境背景象类就可以安装成分的背景。链接组件在鼠标经过时颜色会强化,就像是上面所讲的田和姑本颜色类一样

.bg-primary:主要,使用蓝色(#337ab7)
.bg-success:成功,使用浅绿色(#dff0d8)
.bg-info:通知信息,使用浅蓝色(#d9edf7)
.bg-warning:警告,使用浅黄色(#fcf8e3)
.bg-danger:危险,使用浅紫色(#f2dede)

<div>   
    <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
    <p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>

 

文件对齐

  通过文件对齐类,可以简简单单方便的将文字重新对齐

.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-justify {
    text-align: justify;
}
.text-nowrap {
    white-space: nowrap;
}

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

【居中】

  为任意成分设置 display: block 属性并经过 margin 属性让内部的始末居中

<div class="center-block" style="width:100px;">center</div>

 

大小写

  通过那多少个类能够变动文本的大小写

.text-lowercase {
    text-transform: lowercase;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-capitalize {
    text-transform: capitalize;
}

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

 

按钮和标记

【关闭按钮】

  通过采纳一个代表关闭的图标,能够让模态框和警告框消失

<button type="button" class="close" aria-label="Close">&times;

 【三角符号】

  通过采用三角符号能够提示有些成分具有下拉菜单的功用

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

 

浮动

  通过抬高一个类,能够将任意成分向左或向右浮动。!important 被用来明确CSS 样式的优先级

  [注意]排列导航条中的组件时能够使用.navbar-left 或 .navbar-right

【清除浮动】

  通过为父成分添加 .clearfix 类能够很不难地消除浮动(float) 

.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

<div class="clearfix">
    <div class="pull-left">left</div>
    <div class="pull-right">right</div>
</div>
<div>aaa</div>

 

隐藏

【展现隐藏内容】

.show 和 .hidden 类能够强制任意成分显示或隐匿(对于荧屏阅读器也能起效)。那么些类经过 !important 来避免CSS 样式优先级难点

  另外,.invisible 类能够被用来单独影响因素的可知性,也正是说,成分的 display 属性不被改变,并且那些成分如故能够影响文书档案流的排布

  [注意]那一个类只对块级元素起功能

.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

<div class="show">show</div>
<div class="hidden">hidden</div>
<div class="invisible">invisible</div>

【荧屏阅读器】 

.sr-only 类能够对荧屏阅读器以外的配备隐藏内容。.sr-only 和 .sr-only-focusable 联合利用的话能够在要素有毛病的时候再一次展现出来(例如,使用键盘导航的用户)

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

  按tab键时,上边包车型客车控件会出现内容

【图片替换】

  使用 .text-hide 类或相应的 mixin
能够用来将成分的文本内容替换为一张背景图。

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

<h1 class="text-hide" style="height:30px;background:url('http://via.placeholder.com/30x30') no-repeat;">Custom heading</h1>

 

相关文章