框架的官網地址:https://v3.bootcss.com/css
主要學習Bootstrap框架提供的樣式、組件、插件的使用html
首先下載到本地,在項目中導入使用:前端
下載的文件中包含:min.css的是壓縮的版本,建議使用,容量小加載比較快,jquery
能夠把其餘的刪掉,或者在導入使用的時候注意路徑別選錯了。bootstrap
有網路的狀況下,也能夠用在線導入使用,BootCDN瀏覽器
1.bootstrap動態效果是依賴於jQuery的 因此你應該先導入jQuery前端框架
2.使用前端框架 全部的樣式 都僅僅只須要用戶條件標籤類屬性便可操做框架
3.bootstrap會將一行均分紅12份
row表示一行
col-xxx... 表示多份less
4.使用柵格系統 你腦子裏必定要作一個數學運算 12 +- X = Xide
5.一個row裏面還能夠無限的嵌套row
通常都是成對的固定的導入:
設置全局 CSS 樣式;基本的 HTML 元素都可以經過 class 設置樣式並獲得加強效果;還有先進的柵格系統。
簡單的理解就是,把拷貝過來的HTML框架代碼複製過來,用class屬性設置包裹起來,調節class實現調節樣式的展現。
Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container
容器。咱們提供了兩個做此用處的類。注意,因爲 padding
等屬性的緣由,這兩種 容器類不能互相嵌套。
.container
類用於固定寬度並支持響應式佈局的容器。
<div class="container"> ... </div>
.container-fluid
類用於 100% 寬度,佔據所有視口(viewport)的容器。
<div class="container-fluid"> ... </div>
簡單的使用class來調節屬性:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <link rel="stylesheet" href="sweetalert/dist/sweetalert.css"> <script src="sweetalert/dist/sweetalert.min.js"></script> <style> .c1 { background-color: red; height: 100px; border: 3px solid green; } @media screen and (max-width: 600px) { .c1 { background-color: blue; height: 100px; border: 3px solid green; } } span { color: green; } </style> </head> <body> <div class="container "> <div class="row"> <span class="glyphicon glyphicon-comment"></span>
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統,隨着屏幕或視口(viewport)尺寸的增長,系統會自動分爲最多12列。它包含了易於使用的預約義類,還有強大的mixin 用於生成更具語義的佈局。
柵格系統用於經過一系列的行(row)與列(column)的組合來建立頁面佈局,你的內容就能夠放入這些建立好的佈局中
一、「行(row)」必須包含在 .container
(固定寬度)或 .container-fluid
(100% 寬度)中,以便爲其賦予合適的排列(aligment)和內補(padding)。
二、相似 .row
和 .col-xs-4
這種預約義的類,能夠用來快速建立柵格佈局。Bootstrap 源碼中定義的 mixin 也能夠用來建立語義化的佈局。
三、若是一「行(row)」中包含了的「列(column)」大於 12,多餘的「列(column)」所在的元素將被做爲一個總體另起一行排列。
動態解析static文件路徑
修改背景顏色
實例:流式布容器
將最外面的佈局元素 .container
修改成 .container-fluid
,就能夠將固定寬度的柵格佈局轉換爲 100% 寬度的佈局。
起手使用框架時應該書寫的:
<div class="container-fluid"> <div class="row"> ... </div> </div>
標題:
HTML 中的全部標題標籤,<h1>
到 <h6>
都可使用。另外,還提供了 .h1
到 .h6
類,爲的是給內聯(inline)屬性的文本賦予標題的樣式。
<h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6>
字體着重
經過增長font-weight值強調一段文本
<strong>rendered as bold text</strong>
爲任意 <table>
標籤添加 .table
類能夠爲其賦予基本的樣式 — 少許的內補(padding)和水平方向的分隔線。
<table class="table"> ... </table>
設置表格顏色
<!-- On rows --> <tr class="active">...</tr> <tr class="success">...</tr> <tr class="warning">...</tr> <tr class="danger">...</tr> <tr class="info">...</tr> <!-- On cells (`td` or `th`) --> <tr> <td class="active">...</td> <td class="success">...</td> <td class="warning">...</td> <td class="danger">...</td> <td class="info">...</td> </tr>
在書寫table表格的時候能夠先把幾個參數一塊兒寫了,一個列表基本的樣式都應該含有這些屬性。
table-bordered:帶邊框的表格樣式
table-hover:鼠標懸停
table-striped:有條紋的
table-condensed
類可讓表格更加緊湊
單獨的表單控件會被自動賦予一些全局樣式。全部設置了 .form-control
類的 <input>
、
<textarea>
和 <select>
元素都將被默認設置寬度屬性爲 width: 100%;
。
將 label
元素和前面提到的控件包裹在 .form-group
中能夠得到最好的排列。
想讓input框有樣式,加入class=‘from-control’便可。
按鈕
提交的按鈕,跳轉頁面的按鈕等,設置一些樣式和屬性。
能夠做爲按鈕使用的標籤或元素:
爲 <a>
、<button>
或 <input>
元素添加按鈕類(button class)便可使用 Bootstrap 提供的樣式。
例子:
<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">
<a>
)元素 能夠爲基於 <a>
元素建立的按鈕添加 .active
類。鏈接跳轉
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
經過爲 <img>
元素添加如下相應的類,可讓圖片呈現不一樣的形狀。
<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">
經過顏色來展現意圖,Bootstrap 提供了一組工具類。這些類能夠應用於連接,
而且在鼠標通過時顏色能夠還能夠加深,就像默認的連接同樣。
<p class="text-muted">...</p> <p class="text-primary">...</p> <p class="text-success">...</p> <p class="text-info">...</p> <p class="text-warning">...</p> <p class="text-danger">...</p>
經過使用一個象徵關閉的圖標,可讓模態框和警告框消失。
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
經過添加一個類,能夠將任意元素向左或向右浮動。!important
被用來明確 CSS 樣式的優先級。
這些類還能夠做爲 mixin(參見 less 文檔) 使用。
<div class="pull-left">...</div> <div class="pull-right">...</div>
經過爲父元素添加 .clearfix
類能夠很容易地清除浮動(float
)。
這裏所使用的是 Nicolas Gallagher 創造的 micro clearfix 方式。此類還能夠做爲 mixin 使用。
<!-- Usage as a class --> <div class="clearfix">...</div>
爲任意元素設置 display: block
屬性並經過 margin
屬性讓其中的內容居中。下面列出的類還能夠做爲 mixin 使用。
<div class="center-block">...</div>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
在全局CSS樣式中重點掌握如下幾部分的使用
無數可複用的組件,包括字體圖標、下拉菜單、導航、警告框、彈出框等更多功能。
直接複製用<span>標籤包裹起來
Font Awesome 專業提供圖標樣式的網站,樣式比較全面多一點
和框架的使用時同樣的,先下載本地或用CDN導入使用,複製代碼寫入,適當修改便可
<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
將表單放置於 .navbar-form
以內能夠呈現很好的垂直對齊,並在較窄的視口(viewport)中呈現摺疊狀態。
使用對齊選項能夠規定其在導航條上出現的位置。
<form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
經過添加 .navbar-inverse
類能夠改變導航條的外觀。
<nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav>
這是一個輕量、靈活的組件,它能延伸至整個瀏覽器視口來展現網站上的關鍵內容。
<div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div>
實例:
綜合以上所學以及所涉及到的插件框架的使用,編寫一個簡易版本的圖書管理系統。
複製Bootstrarp框架提供的導航條、表單、按鈕等組件模板,進行適當的修改,添加樣式調節使其達到更好的效果。
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <link rel="stylesheet" href="fontawesome/css/font-awesome.min.css"> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">圖書管理系統</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">書籍 <span class="sr-only">(current)</span></a></li> <li><a href="#">做者</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多查詢 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Jason</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多操做 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">修改密碼</a></li> <li><a href="#">修改頭像</a></li> <li><a href="#">後臺管理</a></li> <li role="separator" class="divider"></li> <li><a href="#">註銷</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="list-group"> <a href="#" class="list-group-item active"> 書籍管理 </a> <a href="#" class="list-group-item">做者管理</a> <a href="#" class="list-group-item">出版社管理</a> <a href="#" class="list-group-item">其餘</a> </div> </div> <div class="col-md-9"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">圖書管理系統 <span class="glyphicon glyphicon-book pull-right"></span> </h3> </div> <div class="panel-body"> <a href="" class="pull-right btn btn-success">新增</a> <form class="form-inline"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" id="exampleInputAmount" placeholder="搜索"> </div> </div> <button type="submit" class="btn btn-primary">搜索</button> </form> <br> <table class="table table-striped table-hover table-bordered"> <thead> <tr> <th>編號</th> <th>書名</th> <th>價格</th> <th>做者</th> <th class="text-center">操做</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>三國演義</td> <td>199.99</td> <td>羅貫中</td> <td class="text-center"> <a href="" class="btn btn-primary btn-sm">編輯</a> <a href="" class="btn btn-danger btn-sm">刪除</a> </td> </tr> <tr> <td>1</td> <td>三國演義</td> <td>199.99</td> <td>羅貫中</td> <td class="text-center"> <a href="" class="btn btn-primary btn-sm">編輯</a> <a href="" class="btn btn-danger btn-sm">刪除</a> </td> </tr> <tr> <td>1</td> <td>三國演義</td> <td>199.99</td> <td>羅貫中</td> <td class="text-center"> <a href="" class="btn btn-primary btn-sm">編輯</a> <a href="" class="btn btn-danger btn-sm">刪除</a> </td> </tr> <tr> <td>1</td> <td>三國演義</td> <td>199.99</td> <td>羅貫中</td> <td class="text-center"> <a href="" class="btn btn-primary btn-sm">編輯</a> <a href="" class="btn btn-danger btn-sm">刪除</a> </td> </tr> <tr> <td>1</td> <td>三國演義</td> <td>199.99</td> <td>羅貫中</td> <td class="text-center"> <a href="" class="btn btn-primary btn-sm">編輯</a> <a href="" class="btn btn-danger btn-sm">刪除</a> </td> </tr> </tbody> </table> <div class="text-center"> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> </div><!-- /input-group --> </div> </div> </div> </div> </div> </body> </html>
搭建效果: