Bootstrap 3.3.7学习笔记4

text以及background辅助class

.text-left {  text-align: left;}.text-right {  text-align: right;}.text-center {  text-align: center;}.text-justify {  text-align: justify;}.text-nowrap {  white-space: nowrap;}.text-lowercase {  text-transform: lowercase;}.text-uppercase {  text-transform: uppercase;}.text-capitalize {  text-transform: capitalize;}.text-muted {  color: #777;}.text-primary {  color: #337ab7;}a.text-primary:hover,a.text-primary:focus {  color: #286090;}.text-success {  color: #3c763d;}a.text-success:hover,a.text-success:focus {  color: #2b542c;}.text-info {  color: #31708f;}a.text-info:hover,a.text-info:focus {  color: #245269;}.text-warning {  color: #8a6d3b;}a.text-warning:hover,a.text-warning:focus {  color: #66512c;}.text-danger {  color: #a94442;}a.text-danger:hover,a.text-danger:focus {  color: #843534;}.bg-primary {  color: #fff;  background-color: #337ab7;}a.bg-primary:hover,a.bg-primary:focus {  background-color: #286090;}.bg-success {  background-color: #dff0d8;}a.bg-success:hover,a.bg-success:focus {  background-color: #c1e2b3;}.bg-info {  background-color: #d9edf7;}a.bg-info:hover,a.bg-info:focus {  background-color: #afd9ee;}.bg-warning {  background-color: #fcf8e3;}a.bg-warning:hover,a.bg-warning:focus {  background-color: #f7ecb5;}.bg-danger {  background-color: #f2dede;}a.bg-danger:hover,a.bg-danger:focus {  background-color: #e4b9b9;}

知识点:

1. 控制文字颜色的helper class们
   
   • .text-muted
   • .text-primary
   • .text-success
   • .text-info
   • .text-warning
   • .text-danger

2. 控制背景颜色的helper class们

   .bg-primary .bg-success .bg-info .bg-warning .bg-danger
3. 以上说的这些类如果在anchor标签<a>中出现的话，还会有一些不一样的颜色表现。
4. 值得注意的是只有在深蓝色的bg-primary当中更改了文字的颜色，让其更加醒目。
5. 控制文字大小写的helper class们
   
   • .text-lowercase
   • .text-uppercase
   • .text-capitalize
6. 控制文本布局的helper class们
   
   • .text-left: 靠左对齐
   • .text-righ: 靠右对齐
   • .text-center: 中间对齐
   • .text-justify: 两端对齐，只对IE有效，没有请自实验过。
   • .text-nowrap: 文字不允许换行