Boostrap技能点整理之【bootstrap简介】
生活随笔
收集整理的這篇文章主要介紹了
Boostrap技能点整理之【bootstrap简介】
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
bootstrap，目前市面上最受歡迎HTML、CSS、JavaScript框架，用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的 WEB 項目。
從今天起，我們就開始整理bootstrap的相關(guān)技能點。
1
什么是 Bootstrap呢？
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的 WEB 項目【官方定義】。
2
為什么使用 Bootstrap？
容易上手：
只要您具備 HTML 和 CSS 的基礎(chǔ)知識，您就可以開始學(xué)習(xí) Bootstrap。
響應(yīng)式設(shè)計：
Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺式機、平板電腦和手機。
更多有關(guān)響應(yīng)式設(shè)計的內(nèi)容詳見 Bootstrap 響應(yīng)式設(shè)計
當(dāng)然官方文檔里面還有其他的，我覺得最重要的莫屬這兩點了。
4
下面先看兩個簡單的bootstrap的實例
實例一：
<!DOCTYPE html> <html> <head><title>Bootstrap 實例</title><meta?charset="utf-8"><meta?name="viewport"?content="width=device-width, initial-scale=1"><link?rel="stylesheet"?href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">??<script?src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script?src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body><div?class="container"><div?class="jumbotron"><h1>我的第一個 Bootstrap 頁面</h1><p>重置窗口大小，查看響應(yīng)式效果！</p>?</div><div?class="row"><div?class="col-sm-4"><h3>第一列</h3><p>學(xué)的不僅是技術(shù)，更是夢想！</p><p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p></div><div?class="col-sm-4"><h3>第二列</h3><p>學(xué)的不僅是技術(shù)，更是夢想！</p><p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p></div><div?class="col-sm-4"><h3>第三列</h3>????????<p>學(xué)的不僅是技術(shù)，更是夢想！</p><p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p></div></div> </div></body> </html>下面是運行結(jié)果：
電腦端：
手機端：
實例二：
<!DOCTYPE html> <html><head><title>Bootstrap 實例</title><!-- 包含頭部信息用于適應(yīng)不同設(shè)備 --><meta?name="viewport"?content="width=device-width, initial-scale=1"><!-- 包含 bootstrap 樣式表 --><link?rel="stylesheet"?href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><div?class="container"><h2>表格</h2><p>創(chuàng)建響應(yīng)式表格 (將在小于768px的小型設(shè)備下水平滾動)。另外：添加交替單元格的背景色：</p>??????<div?class="table-responsive">??????????<table?class="table table-striped table-bordered"><thead><tr><th>#</th><th>Name</th><th>Street</th></tr></thead><tbody><tr><td>1</td><td>Anna Awesome</td><td>Broome Street</td></tr><tr><td>2</td><td>Debbie Dallas</td><td>Houston Street</td></tr><tr><td>3</td><td>John Doe</td><td>Madison Street</td></tr></tbody></table></div><h2>圖像</h2><p>創(chuàng)建項應(yīng)式圖片(將擴展到父元素)。另外：圖片以橢圓型展示：</p>????????????<img?src="/upload/images/201509/40d5e05de34.gif"?class="img-responsive img-circle"?alt="Cinque Terre"?width="304"?height="236">?<h2>圖標(biāo)</h2><p>插入圖標(biāo):</p>??????<p>云圖標(biāo): <span?class="glyphicon glyphicon-cloud"></span></p>??????<p>信件圖標(biāo): <span?class="glyphicon glyphicon-envelope"></span></p>????????????<p>搜索圖標(biāo): <span?class="glyphicon glyphicon-search"></span></p><p>打印圖標(biāo): <span?class="glyphicon glyphicon-print"></span></p>??????<p>下載圖標(biāo)：<span?class="glyphicon glyphicon-download"></span></p>??????</div><!-- JavaScript 放置在文檔最后面可以使頁面加載速度更快 --><!-- 可選: 包含 jQuery 庫 --><script?src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><!-- 可選: 合并了 Bootstrap JavaScript 插件 --><script?src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script></body></html>運行結(jié)果：
關(guān)于細(xì)節(jié)代碼我們后期在慢慢的整理。
歡
迎
關(guān)
注
公眾號：雄雄的小課堂
CSDN：穆雄雄的博客
總結(jié)
以上是生活随笔為你收集整理的Boostrap技能点整理之【bootstrap简介】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《走遍中国》珍藏版（十四）
- 下一篇： Boostrap技能点整理之【按钮样式】