Python Day60-63 Bootstrap 的介紹和使用
1 Bootstrap 中文官網地址
http://v3.bootcss.com/css/
2 導入方式
- 在線導入：
CDN 導入 bootstrap BootCDN 提供的免費 CDN 加速服務（同時支持 http 和 https 協議） 訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費。css
- 本地導入：
下載到本地 link rel="stylesheet" src="本地css"html
3 設置html 文檔模板
- strongHTML5 文檔類型： html lang="zh-CN"
- 移動設備優先:
確保適當的繪製和觸屏縮放，須要在 head 之中添加 viewport 元數據標籤。 meta name="viewport" content="width=device-width, initial-scale=1"jquery
- IE 兼容模式
Bootstrap 不支持 IE 古老的兼容模式。爲了讓 IE 瀏覽器運行最新的渲染模式下， 建議將此 標籤加入到你的頁面中：meta http-equiv="X-UA-Compatible" content="IE=edge"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>Title</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
4 佈局：api
佈局容器
.container 類用於固定寬度並支持響應式佈局的容器。
<div class="container">
...
</div>
.container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。
<div class="container-fluid">
...
</div>
手機
.col-xs-12
平板
.col-sm-6
電腦
.col-md-8
超大屏
.col-lg-8
柵格系統
流式：
row 必須放到 container和 container-fluid 裏面
col 放在 row
不一樣的設備：
col-md-6 col-xs-4
col-md-6 col-xs-8
列嵌套
container -- 有一個 15px的padding
裏面的 內標籤 能夠 設置 margin -15px
clearfix <div class="clearfix"></div>
另起一行
列偏移：
col-md-offset-3
列排序：
col-md-3 col-md-push-9
排版實例：
<h1> 到 <h6>
<small>Secondary text</small>
中心內容 加粗
經過添加 .lead 類可讓段落突出顯示。
<p class="lead">sadsadasdsadsa</p>
高亮：
<mark>highlight</mark>
被刪除：
<del>This line of text is meant to be treated as deleted text.</del>
沒用的標籤：
<s>This line of text is meant to be treated as no longer accurate.</s>
插入標籤：
<ins>This line of text is meant to be treated as an addition to the document.</ins>
帶下劃線的標籤：
<u>This line of text will render as underlined</u>
小號文本
<small>This line of text is meant to be treated as fine print.</small>
着重
<strong>rendered as bold text</strong>
斜體
<em>rendered as italicized text</em>
對齊
<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>
改變大小寫
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
縮略語
<abbr title="attribute">attr</abbr>
首字母縮略語
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
引用 左邊有一條豎線
<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>
列表 ：
無序列表
<ul>
<li>...</li>
</ul>
有序列表
<ol>
<li>...</li>
</ol>
無樣式列表
<ul class="list-unstyled">
<li>...</li>
</ul>
內聯列表
<ul class="list-inline">
<li>...</li>
</ul>
描述
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
水平排列的描述
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
內聯代碼
經過 <code> 標籤包裹內聯樣式的代碼片斷。
<code><section></code>
用戶輸入
經過 <kbd> 標籤標記用戶經過鍵盤輸入的內容。
<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
代碼塊
多行代碼能夠使用 <pre> 標籤。爲了正確的展現代碼，注意將尖括號作轉義處理。
<pre><p>Sample text here...</p></pre>
變量
經過 <var> 標籤標記變量。
y = mx + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
程序輸出
經過 <samp> 標籤來標記程序輸出的內容。
<samp>This text is meant to be treated as sample output from a computer program.</samp>
表格:
基本實例
<table class="table">
...
</table>
條紋狀表格
經過 .table-striped 類能夠給 <tbody> 以內的每一行增長斑馬條紋樣式。
<table class="table table-striped">
...
</table>
帶邊框的表格
添加 .table-bordered 類爲表格和其中的每一個單元格增長邊框。
<table class="table table-bordered">
...
</table>
鼠標懸停
經過添加 .table-hover 類可讓 <tbody> 中的每一行對鼠標懸停狀態做出響應。
<table class="table table-hover">
...
</table>
緊縮表格
經過添加 .table-condensed 類可讓表格更加緊湊，單元格中的內補（padding）均會減半。
<table class="table table-condensed">
...
</table>
狀態類
經過這些狀態類能夠爲行或單元格設置顏色。
.active 鼠標懸停在行或單元格上時所設置的顏色
.success 標識成功或積極的動做
.info 標識普通的提示信息或動做
.warning 標識警告或須要用戶注意
.danger 標識危險或潛在的帶來負面影響的動做
響應式表格:
其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。
<div class="table-responsive">
<table class="table">
...
</table>
</div>
表單
基本實例
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
內聯表單
爲 <form> 元素添加 .form-inline 類可以使其內容左對齊而且表現爲 inline-block 級別的控件。只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單摺疊）。
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
Bootstrap3居中處理：
水平居中：
- .center-block 不涉及到列的居中 本質上就是 margin: 0 auto
讓那個標籤居中就把它寫在哪一個標籤的樣式類中
- 咱們自定義的居中 在涉及到列的居中時使用
.col-centered {
float: none;
margin: 0 auto;
}
- 文本類居中或者display: inline
.text-center
垂直居中：
.vertical-center {
display: flex;
align-items: center;
}
用在父標籤中，讓子塊級標籤垂直居中
Bootstrap組件：
圖標：
span標籤，裏面加上樣式類
glyphicon glyphicon-piggy-bank
下拉菜單： 後面咱們就要用到bootstrap.js --> 以前還要引用jQuery.js
按鈕組
.btn-group
.btn-toolbar
尺寸
分列式下拉菜單按鈕
.css 和.min.css的區別是：
.min.css是壓縮版的，用於生產環境的，由於它把多餘的空格都去掉了，體積很小
.css 是沒有壓縮的
咱們如今是開發階段，用哪一個均可以
.min.js
.js
同上
js文件咱們一般放在body標籤裏面的最下面
除非你的js代碼就必須在文檔加載以前運行，這個時候要放在head標籤裏面
導航瀏覽器
******微信
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<!--導航區開始-->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
</ul>
<!--導航區結束-->
<!--面板區開始-->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">這裏是主頁的內容</div>
<div role="tabpanel" class="tab-pane" id="profile">這裏是簡介頁面的內容</div>
<div role="tabpanel" class="tab-pane" id="messages">這裏是消息頁面的內容</div>
</div>
<!--面板區結束-->
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
<!--導航區開始-->
<ul class="nav nav-tabs nav-stacked" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
</ul>
<!--導航區結束-->佈局
<!--面板區開始-->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">這裏是主頁的內容</div>
<div role="tabpanel" class="tab-pane" id="profile">這裏是簡介頁面的內容</div>
<div role="tabpanel" class="tab-pane" id="messages">這裏是消息頁面的內容</div>
</div>
<!--面板區結束-->flex
.nav-tabs --> tab式
.nav-pills --> 膠囊式
.nav-justified --> 兩端對齊
導航條
.navbar-btn
.navbar-text
.navbar-left .navbar-right --> 在導航條裏面用左右浮動的化須要使用這倆個
.navbar-link
**導航條不須要放在.container裏面**
.navbar-fixed-top --> 固定在頂部
若是使用了上面固定在頂部的樣式，那麼就須要給body設置padding
body { padding-top: 70px; }
.navbar-static-top --> 靜止在頂部
.navbar-inverse --> 反色
麪包屑導航/路徑導航
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
分頁
翻頁
ui
標籤
.label
徽章
微信未讀消息
我的中心通知的提示
巨幕
鋪滿整個屏幕
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
頁頭
縮略圖 --> 前女朋友的頁面
進度條
應用場景：
- 上傳下載加載
- 體現步驟進度
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
.progress-bar-striped 條紋狀進度條
動起來
.active
顏色
.progress-bar-success
.progress-bar-warning
.progress-bar-info
.progress-bar-danger
媒體對象 後面寫項目會用到 .media-left .media-body .media-right 頭像的位置： .默認 .media-middle --> 中間 .media-bottom --> 底部 列表組 外面的div加這個樣式： .list-group 裏面的元素加這個樣式: .list-group-item 面板 <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">這裏寫標題</h3> </div> <div class="panel-body"> 這裏面是內容 </div> <div class="panel-footer">Panel footer</div> </div>
- 1. bootstrap的介紹 和使用
- 2. Bootstrap的基本使用方法介紹
- 3. Haystack的介紹和使用
- 4. Https的介紹和使用
- 5. Bootstrap-table使用詳細介紹
- 6. Bootstrap介紹
- 7. bootstrap介紹
- 8. 【Bootstrap 介紹】
- 9. Keychain的介紹和使用
- 10. CountDownLatch的介紹和使用
- 更多相關文章...
- • 網站主機 介紹 - 網站主機教程
- • SQLite - Python - SQLite教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. bootstrap的介紹 和使用
- 2. Bootstrap的基本使用方法介紹
- 3. Haystack的介紹和使用
- 4. Https的介紹和使用
- 5. Bootstrap-table使用詳細介紹
- 6. Bootstrap介紹
- 7. bootstrap介紹
- 8. 【Bootstrap 介紹】
- 9. Keychain的介紹和使用
- 10. CountDownLatch的介紹和使用