bootstrap入門指引

個別類的使用

  中間廣告用的大塊--jumbotron是大屏的意思
  <div class="jumbotron">
  按鈕  btn btn-lg
  <p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
  導(dǎo)航欄  navbar
  內(nèi)容推到最右邊 <p class="pull-right"><a href="#">Back to top</a></p>
  圖形弄成圓圈 <img class="img-circle">
  兩段內(nèi)容之間劃線 <hr class="featurette-divider">
  下拉菜單的類是 dropdown
    下拉菜單里面的內(nèi)容所在的類是 dropdown-menu
      點擊的a標簽里面<a data-toggle="dropdown">

  對話框變小的類  modal-sm
  按鈕<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
  按鈕如果加上btn-block，則按鈕是一個小塊，否則按鈕的大小隨著Input框的大小一樣

1.bootstrap的引入模板:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap的HTML標準模板</title>   
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!--你自己的樣式文件 -->
        <link href="css/your-style.css" rel="stylesheet">        
        <!-- 以下兩個插件用于在IE8以及以下版本瀏覽器支持HTML5元素和媒體查詢，如果不需要用可以移除 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1>Hello, world!</h1>

        <!-- 如果要使用Bootstrap的js插件，必須先調(diào)入jQuery -->
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
        <!-- 包括所有bootstrap的js插件或者可以根據(jù)需要使用的js插件調(diào)用　-->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </body>
</html>

2排版

bootstrap覆蓋了原來的標題樣式，bootstrap標題的樣式如下,其中h1-h3的margin-bottom應(yīng)該為20px，讓非標題元素使用標題的樣式，可以為其加上類名h1-h6：

Paste_Image.png
    Bootstrap 將全局 font-size 設(shè)置為 **14px**，
    line-height設(shè)置為 **1.428**。
    這些屬性直接賦予 <body>元素和所有段落元素。另外，
    <p>段落）元素還被設(shè)置了等于 1/2 行高（即 10px）的底部外邊距（margin）。

    1.主題頁面   <p>...</p>
    2.中心內(nèi)容通過添加 .lead類可以讓段落突出顯示。<p class="lead">...</p>
    3.內(nèi)聯(lián)文本元素,把某個單詞高亮顯示<mark>...</mark>
    You can use the mark tag to <mark>highlight</mark> text.
    4.被刪除的文本<del>...</del>
    5.無用文本 <s>...</s>
    6.插入文本<ins>...</ins>,在內(nèi)容下面加下劃線

3. 標題的樣式---類名學(xué)習：

（1）強調(diào)類名

.text-muted：提示，使用淺灰色（#999）
.text-primary：主要，使用藍色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#a94442）

a.text-primary:hover {
color: #3071a9;
}

a.text-success:hover {
color: #2b542c;
}

a.text-info:hover {
color: #245269;
}

a.text-warning:hover {
color: #66512c;
}

a.text-danger:hover {
color: #843534;
}

(2)對齊類名

.text-left：左對齊
.text-right：右對齊
.text-center：居中
.text-justify：兩端

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

例

 <div class="text-left">
   <!-- text-left：左對齊 -->
    Bootstrap 中文網(wǎng) 為 Bootstrap 專門構(gòu)建了自己的免費 CDN <br/>
    加速服務(wù)?；趪鴥?nèi)云廠商的 CDN 服務(wù)，訪問速度更快、加速效果更明顯、沒有速<br/>度和帶寬限制、永久免費。Bootstrap 中文網(wǎng)還對大量的前端開源工具庫提供了 CDN 加速服務(wù)，請進入BootCDN <br/>
    主頁查看更多可用的工具庫。
  </div>
  <div class="text-center">
  <!-- text-center：居中對齊 -->
    Bootstrap 中文網(wǎng) 為 Bootstrap 專門構(gòu)建了自己的免費 CDN <br/>
    加速服務(wù)?；趪鴥?nèi)云廠商的 CDN 服務(wù)，訪問速度更快、加速效果更明顯、沒有速<br/>度和帶寬限制、永久免費。Bootstrap 中文網(wǎng)還對大量的前端開源工具庫提供了 CDN 加速服務(wù)，請進入BootCDN <br/>
    主頁查看更多可用的工具庫。
  </div>
  <div class="text-right">
  <!-- text-right：右對齊 -->
    Bootstrap 中文網(wǎng) 為 Bootstrap 專門構(gòu)建了自己的免費 CDN <br/>
    加速服務(wù)?；趪鴥?nèi)云廠商的 CDN 服務(wù)，訪問速度更快、加速效果更明顯、沒有速<br/>度和帶寬限制、永久免費。Bootstrap 中文網(wǎng)還對大量的前端開源工具庫提供了 CDN 加速服務(wù)，請進入BootCDN <br/>
    主頁查看更多可用的工具庫。
  </div>
  <div class="text-justify">
  <!-- text-justify：兩端對齊(其實就是自動換行) -->
    Bootstrap 中文網(wǎng) 為 Bootstrap 專門構(gòu)建了自己的免費 CDN 加速服務(wù)?；趪鴥?nèi)云廠商的 CDN 服務(wù)，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費。Bootstrap 中文網(wǎng)還對大量的前端開源工具庫提供了 CDN 加速服務(wù)，請進入BootCDN 主頁查看更多可用的工具庫。
  </div>

效果如下

Paste_Image.png

3)改變文本字體的大小寫

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

4）列表類名
默認情況下，bootstrap中的無序列表和有序列表帶有項目符號，利用類.list-unstyled去除項目符號

.list-unstyled {padding-left: 0;list-style: none;}
 ul ol 水平列表：list-inline
把垂直列表換成水平列表，而且去掉項目符號（編號），保持水平顯示

dl 水平列表：dl-horizontal
屏幕大于768px的時候，添加類名“.dl-horizontal”才具有水平定義列表效果

類名.list-inlinc用來實現(xiàn)內(nèi)聯(lián)列表，也就是將垂直列表幻城水平列表，并去掉項目符號，保持水平顯示，其為制作水平導(dǎo)航而生

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

定義列表，bootstrap沒有太大的調(diào)整，只是調(diào)整了行間距，外邊距和字體效果

dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}

水平定義列表就像內(nèi)聯(lián)列表一樣，bootstrap添加類.dl-horizontal即可，但是只有在屏幕大于768px的時候才有效

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}

引用

默認樣式的引用
將任何 HTML 元素包裹在 <blockquote> 中即可表現(xiàn)為引用樣式。對于直接引用，我們建議用 <p> 標簽。
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<blockquote class="blockquote-reverse">
  ...
</blockquote>

4. 代碼模塊

code顯示單行內(nèi)聯(lián)代碼
pre顯示多行代碼
kbd顯示用戶輸入代碼
其中pre為其添加類.prc-scrollablc可以控制其最大高度為340px;超出則出現(xiàn)滾動條，可防止占有太多篇幅
Paste_Image.png

5.表格

表格式Bootstrap中的一個基礎(chǔ)組件之一，bootstrap為表格設(shè)置了一種基礎(chǔ)樣式和四種附加樣式以及一個響應(yīng)式的表格

.table：基礎(chǔ)表格
.table-striped：斑馬線表格
.table-bordered：帶邊框的表格
.table-hover：鼠標懸停高亮的表格
.table-condensed：緊湊型表格
.table-responsive：響應(yīng)式表格
Paste_Image.png
Paste_Image.png
Paste_Image.png

bootstrap還為<tr>提供了5種不同的類名

Paste_Image.png

6.bootstrap-圖標

    Bootstrap框架中也為大家提供了近200個不同的icon圖片，
    而這些圖標都是使用CSS3的@font-face屬性配合字體來實現(xiàn)的icon效果。

傳送門：中文http://getbootstrap.com/components/#glyphicons
傳送門：英文http://v3.bootcss.com/components/

    查看所有圖標名稱
任何行級元素都可以，通常使用span標簽坐圖標容器
在Bootstrap框架中是通過給元素添加“glyphicon”類名來實現(xiàn)，
<span class=“glyphic glyphicon-search”></span>
<span class=“glyphic glyphicon-asterisk”></span>
<span class=“glyphic glyphicon-plus”></span>
<span class=“glyphic glyphicon-cloud”></span>

7.bootstrap的全局樣式，移除了body中的margin聲明，設(shè)置body的顏色為白色，為排版設(shè)置了基本的字體、字號和行高，設(shè)置全局鏈接顏色，且當鏈接處于hover狀態(tài)時才回顯示下劃線樣式，以下摘錄自其css文件

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  margin: .67em 0;
  font-size: 2em;
}
mark {
  color: #000;
  background: #ff0;
}
small {
  font-size: 80%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -.5em;
}
sub {
  bottom: -.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  height: 0;
  -moz-box-sizing: content-box;
       box-sizing: content-box;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}
legend {
  padding: 0;
  border: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}
@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;

    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .navbar {
    display: none;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Bootstrap是什么？ 一套易用、優(yōu)雅、靈活、可擴展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 11,114評論 3贊 184
  • 第5章 菜單、按鈕及導(dǎo)航 一、下拉菜單 小伙伴們注意，在Bootstrap框架中的下拉菜單組件是一個獨立的組件，根...
    凜0_0閱讀 5,308評論 0贊 66
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,118評論 1贊 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,537評論 19贊 139
  • 教程整理自慕課網(wǎng)(原文部分錯誤在這篇文章得到修改，本文版本Bootstrap3.3.7)。 框架簡介 Bootst...
    小小奶狗閱讀 2,690評論 0贊 5

友情鏈接更多精彩內(nèi)容