bootstrap基础学习八篇

bootstrap辅助类

a.对于文本颜色

以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：
类     描述
.text-muted     "text-muted" 类的文本样式
.text-primary     "text-primary" 类的文本样式
.text-success     "text-success" 类的文本样式
.text-info     "text-info" 类的文本样式
.text-warning     "text-warning" 类的文本样式
.text-danger     "text-danger" 类的文本样式

b.示例代码如下：

<p class="text-muted">this is a demo</p>
     <p class="text-primary">this is a demo</p>
     <p class="text-success">this is a demo</p>
     <p class="text-info">this is a demo</p>
     <p class="text-warning">this is a demo</p>
     <p class="text-danger">this is a demo</p>

c.效果如下：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHsAAAC4CAIAAABM2QQyAAAJlklEQVR4nO2dv04bSxSH/UqIEmgQLwEdKZIKiQokCjdGMlDEyguEJMQgSiSkRbKQAJuU/DEFojIuMFYoIp5gUszMmTPjmd1ZIc4u9vlEYa9/szvz7dkzK92reyuCoaVS9AQmDjZODRunho1Tw8apYePUVIQQw+Gw6GlMEJVWY73Rksa7zfX1Znc0021CJIP4ZH5Cs/toxBgvB+WeXTyVdUmzq9bUajXUIahWU7lD+NFfy/FJK7EedNltwkla2Ljv9MNWQ8X0GbvNkbNnz+u9cWscZtdtwpy0R1xl/orLlTRHu02v82Fgbvg4+iJlyog/Pmw17HkVIT3cVcw3n0c/8cmRcaN55yB8dcPDVmO92fX4dD/rYOpV3508xtEjGW4CkUlzjVBfsSpZOGJdGq2hPQDv4Xol7r7uXoGGXMbRL/5GmCuJfvBVW5pxr6cxNi6ECEw3OukE39RVvNfxGf94XQX/7q+P6KQb8D4HuDG7W6Hts9EaRhgvyc6p1gtvh6k1ntZ38yVxQL3Hheo24+0QtGUbtwcW9XZYxEUnGjZODRunho1Tw8apYePUsHFq2Dg1bJwaNk4NG6eGjVPDxqlh49SwcWrYODVsnBo2Tg0bp6YihOgNX4uexgRR+fEtWTqVxp+qG0n1bjTzVN1o/4j6p7DxyfzcXU1vXJ2/z7kpiTFeDsbG+PRGMr2RTB88KeOnD0vyiKlWU7m90/a0+ysmPinEEC6UTAfv9FMVTnKKjb/++KbHfnvomRPKmF7RHfqcMpAWt8ZhVecHMCftEVeZv+JyJY3l84PEl3kNzA0fF73TtpqnvIVSrnQtP8s7MVQDwT5aICnhrmJM+Tz6iU/aePPOQfjqhl9/fEuqd8q4nj9ei/48fFiyBhbTRfMYR49kuAlEJiEPjcU1bopXon2hfmX+lk5fUS0Lew/X67q7sovaelbIyGVccX4QatC5ktqU8Nd4mnFvNxhj40KIwHSjk87i39RVNJnGP15XwUu1lgdEJ92A9znAG527c5obdnelxmYaL8nOqdoivB2m1rjuEqEGHZ/EgavzYLnBfhB+OwSz2cZFKd4Oi7joRMPGqWHj1LBxatg4NWycGjZODRunho1Tw8apYePUsHFq2Dg1bJwaNk4NG6eGjVPDxqlh49RUhBCPz/2ipzFBVPa+zi23pPF2bW2udjuaadfWPu09x5wtPpmf283Ztc32+5ybkhjj5WBsjM+uzc2uzc0228p46/eyPGKq1VTuY+vTrPsrJj4pxDNcaG42eKfbNThJCxvv733VY7/+fjQnlDG9olv0OWUgLW6Nw6raTZiT9oirzF9xuZLGcrs558v0A3PDx8Vj65Oap7yFUq50LT/LO/GsBoJ9tEBSwl3FmPJ59BOftPHmnYPw1Q33977O1W6VcT1/vBb9+fn3sjWwmC6axzh6JMNNIDIJeWgsrnFTvBLtC/Ur87fc6qNaFvYertd1u2kXtfWskJHLuKLdDDXoXEltSvhrPM24txuMsXEhRGC60Uln8W/qKppM4x+vq+ClWssDopNuwPsc4I3O3TnNDbvdVGMzjZdk51RtEd4OU2tcd4lQg45P4sBmO1husB+E3w7BbLZxUYq3wyIuOtGwcWrYODVsnBo2Tg0bp4aNU8PGqWHj1LBxatg4NWycGjZODRunho1Tw8apYePUsHFq2Dg1FSFEb/BS9DQmiMrudmPxRBp/qK42qjejmYfq6q/dQczZ4pP5uTmeWj0+e59zUxJjvByMjfGp1cbUamPq54MyfvJnUR4x1Woqt3fya8r9FROfFGIAF2pMBe/0QxVOcoKNv+xu67Hbf3rmhDKmV3SDPqcMpMWtcVjV2U+Yk/aIq8xfcbmSxvLZz4Yv8xKYGz4ueie/1DzlLZRypWv5Wd6JgRoI9tECSQl3FWPK59FPfNLGm3cOwlc3/LK73ajeKON6/ngt+vPgz6I1sJgumsc4eiTDTSAyCXloLK5xU7wS7Qv1K/O3ePKCalnYe7he182xXdTWs0JGLuOKs5+hBp0rqU0Jf42nGfd2gzE2LoQITDc66Sz+TV1Fk2n843UVvFRreUB00g14nwO80bk7p7lhN8dqbKbxkuycqi3C22FqjesuEWrQ8UkcOD4LlhvsB+G3QzCbbVyU4u2wiItONGycGjZODRunho1Tw8apYePUsHFq2Dg1bJwaNk4NG6eGjVPDxqlh49SwcWrYODVsnBo2Tk1FCPF3UMh/TGdCqXTqM98TafziaGXm6Ho0c3G0styJ+jdm45P5ua7trNTu3+fclMQYLwdjY3xnZWZnZWZn90IZT/a+yyOmWk3l/k2Wd9xfMfFJIQZwoZmd4J2+OIKTJNj4Y6eux9b3/poTyphe0TX6nDKQFrfGYVX3uzAn7RFXmb/iciWN5fvdGV/mMTA3fFz8TZbVPOUtlHKla/lZ3omBGgj20QJJCXcVY8rn0U980sabdw7CVzf82KnPHF0r43r+eC3682DvuzWwmC6axzh6JMNNIDIJeWgsrnFTvBLtC/Ur8/c9eUS1LOw9XK/rumYXtfWskJHLuOJ+N9SgcyW1KeGv8TTj3m4wxsaFEIHpRiedxb+pq2gyjX+8roKXai0PiE66Ae9zgDc6d+c0N+y6psZmGi/JzqnaIrwdpta47hKhBh2fxIHafbDcYD8Ivx2C2WzjohRvh0VcdKJh49SwcWrYODVsnBo2Tg0bp4aNU8PGqWHj1LBxatg4NWycGjZODRunho1Tw8apYePUsHFqKkKIf33q//PtJFPpfplP9qXxzuXC/GVnNNO5XPjcjbop8cn8dOqHC/UxKI0Y4+VgbIwfLswfLswfbnWU8f1mIo+YajWV+2//86H7KyY+KUQfLjR/GLzTnUs4yT423u9+0WO/NP+ZE8qYXlEHfU4ZSItb47Cq/hbMSXvEVeavuFxJY7m/Ne/L9ANzw8fFv/3Pap7yFkq50rX8LO9EXw0E+2iBpIS7ijHl8+gnPumM8+Wdg/DVDfe7X+YvO8q4nj9ei/7cbybWwGK6aB7j6JEMN4HIJOShsbjGTfFKtC/Ur8xfst9HtYxngtbVqdtFbT0rZOQyrme6FWrQuZLalPDXeJpxbzcYY+NCiMB0o5PO4t/UVeA6WcY/XlfBS7WWB0Qn3YD3OcAbnbtzmhvWqauxmcZLsnOqtghvh6k1rrtEqEHHJ3Gg3g+WG+wH4bdDMJtt3B5Y1NthERedaNg4NWycGjZODRunho1Tw8apYePUsHFq2Dg1bJwaNk4NG6eGjVPDxqlh49T8B0+HEPKYnj61AAAAAElFTkSuQmCC" alt="" />

d.背景色

以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗：

类     描述
.bg-primary     表格单元格使用了 "bg-primary" 类
.bg-success     表格单元格使用了 "bg-success" 类
.bg-info     表格单元格使用了 "bg-info" 类
.bg-warning     表格单元格使用了 "bg-warning" 类
.bg-danger     表格单元格使用了 "bg-danger" 类

e.示例代码如下：

 <p class="bg-primary">this is a demo</p>
     <p class="bg-success">this is a demo</p>
     <p class="bg-info">this is a demo</p>
     <p class="bg-warning">this is a demo</p>
     <p class="bg-danger">this is a demo</p>

f.效果如下：

aaarticlea/png;base64,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" alt="" />

g.其他修饰

类     描述
.pull-left     元素浮动到左边
.pull-right     元素浮动到右边
.center-block     设置元素为 display:block 并居中显示
.clearfix     清除浮动
.show     强制元素显示
.hidden     强制元素隐藏
.sr-only     除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable     与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide     将页面元素所包含的文本内容替换为背景图
.close     显示关闭按钮
.caret     显示下拉式功能

h.示例部分代码如下：

 <div style="width:200px;" class="bg-success pull-right">123</div>
      <div style="width:200px;" class="bg-info" >456</div>

     <div style="width:200px;" class="bg-warning pull-right">789</div>
     <div style="width:200px;" class="bg-danger">000</div>

i.效果如下：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZIAAAA6CAIAAAAV2EiaAAAEN0lEQVR4nO2bP0vrUBxA853uR2klxk8RikNF+wksFZeiUBwzFNyKPGgxQwVXkTekIHHILIiLHQq+If/uzU2rBX+04Z3DGV6vEd6QHn73mjhfAACNwtn1fwAAYDvIFgA0DLIFAA2DbAFAwyBbANAwnMXbJ+KvW9xhr+8R4u9KtlBEsoVyki0UkWyhnGQLRSRbKCfZQhHJFsppZutp1FJe/0n/qOGOwvzKoFusatcj5tZl6/7CVZ07/f4LOuXt5Y/NKzNOgp1/SXDf1LMV9V0zQ5NT1Z3ad2TQVa1hVF6jToNdf0lw37SylZVIy1bQUap9dZ9+fLhqFeUanxS1ur9wy2sQU8tshUOv1T3Vp62gq/yJdUdWJjLEOvVsPVy1lFLK9Tv6tHXnmxNW0FGti+fo9fm8nf7jPcp+1z1/2PX3BPfKPFtPo5Y7Co0kRX3XaxWzerFDnJzqu0XEWs1snY/fo7pNoqZZq1ymLawxzVbUd73+U2WSmvpK2wymXXv7DIeeckfB0Mt7xg4Ra/zZ2ZbxI/MYKz/eYtRCS2eRbg/TPG3aAE59pfzJZzj0lOJsC79xm2zZzdKs7iURI6cYoxZvm7MV9d08W8YmMVvf+fcE98qfZuv5vK02bwM3bi3xv9QJy+2e9rfoiT1GTf20aNWzLbKFNf4oW3e+ss+zao7qyRYabnhuy+xRWStrnU0iWn6frfozeOuyO5/jLay48XHTt6lf96xp/oQXR/K41m+zlT0VYZL/VHvclGahJS/3oIi83INyki0UkWyhnGQLRSRbKCfZQhHJFspJtlBEsoVyOh9xjPjrFtlaLRPE35VsoYhkC+UkWygi2UI5yRaKSLZQTrKFIpItlDPN1vy6nb1KcTiYazfftuuImWW2Zsf2Szy9WXr/3faKpbNb7b5ct46YrJaJkzWoM/6I4494fFKWaNt1xNJ101Z4ppR3+bJMVsvHG6+o0uONp45Gj6u6dcqFFZ2P+eBQta/n+Q037qj24G8cb72OqFmfrdmxUsdh9vG2V45dycvoIMuTcU2yWlweqYObxe6/Krg/OtXuzAeHqvMntnr07TqiZl229JEqWTdtvYwO8nEs1agb4mqZOH8HbStD7et5vO36zr8nuFfWZKsyRi2TVbpnNE67aqctsoWGZAtFtLJVGbWSdIwqVsKzYvK67Wkn8WnXyBbqsklEEavZso+oZsfGZtC4oPxLYm/2eOORLTR0qt0xjt63WUfUrGarEil7Zd3R++LyyNpa4n8uD0CgiJVsaXvAQmuTmFbM6Je9tUTkcVOU0c5WXX20x0r1yUt7QpVmoS0v96CIvNyDcpItFJFsoZxkC0UkWygn2UIRyRbKSbZQRLKFcjpfAACNgmwBQMMgWwDQMMgWADQMsgUADYNsAUDDIFsA0DDIFgA0DLIFAA2DbAFAwyBbANAwyBYANIx/qbOA1syvaXMAAAAASUVORK5CYII=" alt="" />

j.关闭图标：

使用通用的关闭图标来关闭模态框和警告框。使用 class close 得到关闭图标。

关闭图标实例
   <button type="button" class="close" aria-hidden="true">
      &times;
   </button>

k.插入符号

使用插入符表示下拉功能和方向。使用带有 class caret 的 <span> 元素得到该功能。

<p>插入符实例
   <span class="caret"></span>
</p>

l.快速浮动：

分别使用 class pull-left 或 pull-right 来把元素向左或向右浮动。

m.代码如下：

<div class="pull-left">
   向左快速浮动
</div>
<div class="pull-right">
   向右快速浮动
</div>

n.内容居中

使用 class center-block 来居中元素。

o.示例代码如下：

 <div class="row">
         <div class="center-block bg-success text-danger" style="width:200px;">
             这是一个示例
         </div>
     </div>

p.清除浮动：

如需清除元素的浮动，请使用 .clearfix class。

q.代码如下：

<div class="bg-info clearfix">
         <div class="bg-success pull-left">
             向左快速浮动
         </div>

         <div class="bg-danger pull-right">
             向右快速浮动
         </div>

     </div>

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfMAAAAkCAIAAAASIUQ/AAAFdUlEQVR4nO2dvY6jSBSF553ue5QFL2FBYl4BQWg/ABKOLadOYCZHjnuj3sSTt7RSq5MNdwOK+r2ATc+Ids05OskMUIUl9NXh1mXm24+Xtx9/aX9/efsPgiAIeip9f3kzYf4NZIcgCHp2gewQBEGhCWSHIAgKTSA7BEFQaALZIQiCQhPIDkEQFJrmyf7z/fWP9d///AvD8JP643b7Yw2yg+wwHKZXxyvI/kW9+qMJw/Bir45XkP2LevVHE4bhxV4dr89E9nYvaFfdgcUqpe1x6oRLGYmym72EH+e4o/R0/4xVSr2cGW13+SbKW5AdhoOwA7trISip7yNjnRFl9djR5iDEoXHOT87MIP5f3s6JPzJ/prqTnl32jLabIhbF9RNkv5SRj9S7KLmU7K8/T1uK8vb9UkY0qihvu8txL4i2R+ZMZ1jvhH6tAtlhOCB7OJ6AtbcG2KBcRPbbR52QKK635iDG2SWKa9OcC0GUnJkznWG9E/q1ahHZJ5GqwNoj+B5FeXvaUrRNIyISZcePb64ffkLnMrt+pVBHjzva7C/qkpm3DZAdhgMyw0Fforj2KL9HSf1RJySSTBCRODT8+Ob64Sd0LrPrVwp19JxQXDTqkpm3jcVkn8rpMlPfRV59yS4vox7rQ3Lv8o0M1yMzdvlmbKl4f233QkHcGKFKh8XDOMrdj6fN/rL6ownD8GLP53SZqRnCTl2SFAfRY31I7k0Ry3A9MmNTxJPrioK4MUKdDYuHcZS7H09x0fwmsvc8Hb2k3YvNvnKrMToy6xmPu/5Wt0cL/cbKMczenrYbmkvl0zZ+SB/2V380YRhe7CVk51jvcD8uarcaoyOznvEskZucLfQbmX2Y61onMc2l8mkbt92H/YfI7pVNVBHGITuX4p0yd3ry6uwc2Yd1QpF9NLObqb/d8+9WMrZzCT09gewwHJQNznplk56DLsfVdiWjuGiGAb06O0d2q/4+mdnN1D9WF5KxnUvoWf0LyG6wWHHQ5fjcVqc+TZSdSuWcZAA3ya7B7WT2mTBOXpz3qupG24/8yas/mjAML7ZNdoPFioMW2SXW2YxvVr3VaGcGs4NkADfJrsHtZPaZME5enPeq6kYFSf7k30B2+4/jXZJuZu95zVXDrZ6Zdi8oykuzSjP5rjB2A+yu7DA7yA7DT+9HyF5nRHHRjG1vsmS3wEpsNdzqmelbbg5mlWayCjRW8Wd3ZYfZF5KdC+AWT92i/N1kr1IS5UlX0jmyV+kwqeRyl2+MxaDfRJ16CVD3rAK7vnlzbwBkh+Gn9/3VGEXGRWSvMxKHWlfSObLX2TCpnKIpYmMx6DdRp14C1D2rwG4tS+p+Pp/ZuaTcB+qREscE2XXvij/CUISpUqMV0kzcQ9bmd3rtnhl1iSg7XbhPT05PpJxr9UcThuHFHs3s40n5cbLr3hWmC14WYazvnswphmH5nV67Z0ZdIg6NLtxntdMTKef6pb0xXb7xWmLuIHuV2kXw4470x6Jqt3O2mN6xeZ8ju9qJ1bftFHZkfl/90YRheLEX9MZMpGaO7HVGVhH8nJD+WFTtds4W0xs273NkVzuxKr8T2YUdmd8/Q3b1yb6M2zJHz36vpBtg+vILN/hpq6K03f44ol3lhn2jkWbuo1ldh9FNNVHe4kslGH5mj5Nd98A46Hwgs9dFzG631gkNUdpufxxRUrth32ikmftoVtdhdFONKK74F8GmvfqjCcPwYk8yMXCD7CA7DIfp1fEKsn9Rr/5owjC82KvjFWT/ol790YRheLFXx+uXJvva/1MrBEEQ9JhAdgiCoNAEskMQBIUmkB2CICg0gewQBEGhCWSHIAgKTSA7BEFQaALZIQiCQhPIDkEQFJocsv8PRbewzvhwkk8AAAAASUVORK5CYII=" alt="" />

r.隐藏内容与显示内容

通过使用 class .show 和 .hidden 来强行设置元素显示或隐藏（包括屏幕阅读器）。

s.示例代码如下：

<div class="row bg-warning">
         <div class="show bg-info">
             这是一个show示例
         </div>

         <div class="hidden bg-success">
             这是一个show示例
         </div>
     </div>

t.屏幕阅读器

通过使用 class .sr-only 来把元素对所有设备隐藏，除了屏幕阅读器。

<form class="form-inline" role="form">
   <div class="form-group">
      <label class="sr-only" for="email">Email 地址</label>
      <input type="email" class="form-control" placeholder="Enter email">
   </div>
   <div class="form-group">
      <label class="sr-only" for="pass">密码</label>
      <input type="password" class="form-control" placeholder="Password">
   </div>