Bootstrap概念
bootstrap 介紹
? Bootstrap是Twitter的設(shè)計(jì)師Mark Otto和Jacob? Thornton合作開(kāi)發(fā)的基于html赎婚、css、js伪节，用? 于前端開(kāi)發(fā)的開(kāi)源工具包，主要用于移動(dòng)端
什么是bootstrap
? Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架垦搬，用于開(kāi)發(fā)響應(yīng)式布局网严、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目识樱。
為什么使用bootstrap
在移動(dòng)設(shè)備上有非常好的適應(yīng)效果,所有的主流瀏覽器都支持 Bootstrap。 (Internet Explorer Firefox Opera Google Chrome Safari).Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺(tái)式機(jī)震束、平板電腦和手機(jī)怜庸。更多有關(guān)響應(yīng)式設(shè)計(jì)的內(nèi)容詳見(jiàn) Bootstrap 響應(yīng)式設(shè)計(jì)。
手冊(cè)位置:http://v3.bootcss.com/移動(dòng)設(shè)備的設(shè)置
? 為了讓 Bootstrap 開(kāi)發(fā)的網(wǎng)站對(duì)移動(dòng)設(shè)備友好垢村，確保適當(dāng)?shù)睦L制和觸屏縮放割疾，需要在網(wǎng)頁(yè)的 head 之中添加? meta 標(biāo)簽增加viewport屬性值，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
?
width 屬性控制設(shè)備的寬度肝断。假設(shè)您的網(wǎng)站將被帶有不同屏幕分辨率的設(shè)備瀏覽杈曲，那么將它設(shè)置為 device-width 可以確保它能正確呈現(xiàn)在不同設(shè)備上。?
initial-scale=1.0 確保網(wǎng)頁(yè)加載時(shí)胸懈，以 1:1 的比例呈現(xiàn)担扑，不會(huì)有任何的縮放。
bootstrap柵格布局
柵格類(lèi)適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備 趣钱， 并且針對(duì)小屏幕設(shè)備覆蓋柵格類(lèi).Bootstrap框架中的網(wǎng)格系統(tǒng)就是將容器平分成12份涌献。
布局容器
Bootstrap 中所有的內(nèi)容都要現(xiàn)在container或者.container-fluid類(lèi)當(dāng)中,被其包裹
? .container 類(lèi)用于固定寬度并支持響應(yīng)式布局的容器
<div class="container">
</div>
.container-fluid 類(lèi)用于 100% 寬度，占據(jù)全部視口（viewport）的容器首有。
<div class="container-fluid">
? ...
</div>
例:網(wǎng)頁(yè)分為12等分,分別演示最大中等最下寬度
<div class="container">
? <div class="row">
?? <button class="btn btn-primary col-md-4" type="button">test</button>
?? <button class="btn btn-primary col-md-8" type="button">test</button>
? </div>
? <div class="row">
?? <button class="btn btn-info col-md-4" type="button">test</button>
?? <button class="btn btn-info col-md-4" type="button">test</button>
?? <button class="btn btn-info col-md-4" type="button">test</button>
? </div>
? <div class="row">
?? <button class="btn btn-primary col-md-3" type="button">test</button>
?? <button class="btn btn-primary col-md-6" type="button">test</button>
?? <button class="btn btn-primary col-md-3" type="button">test</button>
? </div>
</div>
響應(yīng)式的實(shí)現(xiàn)
設(shè)備屏幕的劃分示意圖
超小設(shè)備（手機(jī)燕垃，小于 768px) ? .col-xs-
?
小型設(shè)備（平板電腦枢劝，768px 起） .col-sm-
?
中型設(shè)備（臺(tái)式電腦，992px 起) ? .col-md-
?
大型設(shè)備（大臺(tái)式電腦卜壕，1200px 起)? .col-lg-
例1:當(dāng)屏幕大于1200時(shí)占1/4.大于992時(shí)占1/3 ,平板時(shí)占1/2,是手機(jī)時(shí)占1
<style>
? div{
? ?? background-color: red;
? ?? height: 300px;
? }
</style>
<body>
? ? <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
? ? </div>
例2:圖片的正常顯示,不用柵格
<img src="D:/images/pao.jpg">
問(wèn)題：圖片不會(huì)隨著頁(yè)面的大小改變而縮放
使用bootstrp中的類(lèi)您旁，則可以在一定程度上跟著頁(yè)面的縮放而變化
手冊(cè)地址? https://v3.bootcss.com/css/#images
?? <div class="container">
? ? ? ? <img src="./images/pao.jpg" class="img-responsive" alt="Responsive
?
? ?? </div>
例3:柵格化+響應(yīng)式
?? <div class="container">
? ? ?? <div class="row">
? ? ? ?? <div class="col-md-4 col-sm-6">
? ? ? ? ?? <img src="D:/images/yu.jpg" width="300px" class="img-rounded">
? ? ? ? ?? <h1>這是圖片</h1>
? ? ? ? ?? <p>這是一張圖片,來(lái)看啊看啊看啊看來(lái)看啊看啊看啊看來(lái)看啊看啊看啊看來(lái)看啊看啊看啊看</p>
? ? ? ?? </div>
? ? ? ?? <div class="col-md-4 col-sm-6">
? ? ? ? ?? <img src="D:/images/yu.jpg" width="300px" class="img-rounded">
? ? ? ? ?? <h1>這是圖片</h1>
? ? ? ? ?? <p>這是一張圖片,來(lái)看啊看啊看啊看來(lái)看啊看啊看啊看來(lái)看啊看啊看啊看來(lái)看啊看啊看啊看</p>
? ? ? ?? </div>
? ? ? ?? <div class="col-md-4 col-sm-6">
? ? ? ? ?? <img src="D:/images/yu.jpg" width="300px" class="img-rounded">
? ? ? ? ?? <h1>這是圖片</h1>
? ? ? ? ?? <p>這是一張圖片,來(lái)看啊看啊看啊看來(lái)看啊看啊看啊看來(lái)看啊看啊看啊看來(lái)看啊看啊看啊看</p>
? ? ? ?? </div>
? ? ?? </div> ? ? ? ?
? ?? </div>
bootstrap的各種插件
button按鈕樣式
手冊(cè)位置? https://v3.bootcss.com/css/#buttons
表單之文本域
手冊(cè)位置： https://v3.bootcss.com/css/#forms
全局css之表格,使用了懸停變色
手冊(cè)位置 https://v3.bootcss.com/css/#tables
組件之字體圖標(biāo)
手冊(cè)位置https://v3.bootcss.com/components/
####
js插件之模態(tài)框(javascript特效)
problem的sql語(yǔ)句
create table problem(id int primary key auto_increment,title varchar(20) not null comment '標(biāo)題',pos varchar(20) not null comment '位置',idea varchar(20) not null comment '想法')engine=MyISAM default charset=utf8;
