建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap 簡介
什么是 Bootstrap？
Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：空間域名、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、始興網(wǎng)站維護、網(wǎng)站推廣。
歷史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產(chǎn)品。
為什么使用 Bootstrap？
- 移動設(shè)備優(yōu)先：自 Bootstrap 3 起，框架包含了貫穿于整個庫的移動設(shè)備優(yōu)先的樣式。
- 瀏覽器支持：所有的主流瀏覽器都支持 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è)計。
- 它為開發(fā)人員創(chuàng)建接口提供了一個簡潔統(tǒng)一的解決方案。
- 它包含了功能強大的內(nèi)置組件，易于定制。
- 它還提供了基于 Web 的定制。
- 它是開源的。
Bootstrap 包的內(nèi)容
- 基本結(jié)構(gòu)：Bootstrap 提供了一個帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。這將在 Bootstrap 基本結(jié)構(gòu) 部分詳細(xì)講解。
- CSS：Bootstrap 自帶以下特性：全局的 CSS 設(shè)置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進(jìn)的網(wǎng)格系統(tǒng)。這將在 Bootstrap CSS 部分詳細(xì)講解。
- 組件：Bootstrap 包含了十幾個可重用的組件，用于創(chuàng)建圖像、下拉菜單、導(dǎo)航、警告框、彈出框等等。這將在 布局組件 部分詳細(xì)講解。
- JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。這將在 Bootstrap 插件 部分詳細(xì)講解。
- 定制：您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。
在線實例
本站的 Bootstrap 教程包含了上百個實例。
你可以使用我們的在線編輯器在線編輯代碼，并點擊運行按鈕查看結(jié)果。
Bootstrap 實例
<
div
class
=
"
container
"
>
<
div
class
=
"
jumbotron
"
>
<
h1
>
我的第一個 Bootstrap 頁面
h1
>
<
p
>
重置窗口大小，查看響應(yīng)式效果！
p
>
div
>
<
div
class
=
"
row
"
>
<
div
class
=
"
col-sm-4
"
>
<
h3
>
Column 1
h3
>
<
p
>
學(xué)的不僅是技術(shù)，更是夢想！
p
>
<
p
>
再牛逼的夢想,也抵不住你傻逼似的堅持！
p
>
div
>
<
div
class
=
"
col-sm-4
"
>
<
h3
>
Column 2
h3
>
<
p
>
學(xué)的不僅是技術(shù)，更是夢想！
p
>
<
p
>
再牛逼的夢想,也抵不住你傻逼似的堅持！
p
>
div
>
<
div
class
=
"
col-sm-4
"
>
<
h3
>
Column 3
h3
>
<
p
>
學(xué)的不僅是技術(shù)，更是夢想！
p
>
<
p
>
再牛逼的夢想,也抵不住你傻逼似的堅持！
p
>
div
>
div
>
div
>
嘗試一下 ?
更多實例
Bootstrap 實例2
<
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
>
嘗試一下 ?
點擊 "嘗試一下" 按鈕查看它是如何工作的。
網(wǎng)頁名稱：創(chuàng)新互聯(lián)Bootstrap教程：Bootstrap簡介
分享網(wǎng)址：http://m.5511xx.com/article/dppceos.html
