站長(zhǎng)資訊網(wǎng)
bootstrap不是軟件，而是一個(gè)用于快速開(kāi)發(fā)web應(yīng)用程序和網(wǎng)站的前端框架；bootstrap是基于HTML、css、JavaScript開(kāi)發(fā)的，提供了優(yōu)雅的html和css規(guī)范，因此bootstrap并不是一款軟件。
如何快速入門(mén)VUE3.0：進(jìn)入學(xué)習(xí)
本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap5版、DELL G3電腦
bootstrap不是軟件
Bootstrap 是一個(gè)用于快速開(kāi)發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap是美國(guó)Twitter公司的設(shè)計(jì)師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開(kāi)發(fā)的簡(jiǎn)潔、直觀、強(qiáng)悍的前端開(kāi)發(fā)框架，使得 Web 開(kāi)發(fā)更加快捷。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動(dòng)態(tài)CSS語(yǔ)言Less寫(xiě)成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門(mén)開(kāi)源項(xiàng)目，包括NASA的MSNBC（微軟全國(guó)廣播公司）的Breaking News都使用了該項(xiàng)目。國(guó)內(nèi)一些移動(dòng)開(kāi)發(fā)者較為熟悉的框架，如WeX5前端開(kāi)源框架等，也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來(lái)。
Bootstrap 包的內(nèi)容
基本結(jié)構(gòu)：Bootstrap 提供了一個(gè)帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。這將在 Bootstrap 基本結(jié)構(gòu) 部分詳細(xì)講解。
CSS：Bootstrap 自帶以下特性：全局的 CSS 設(shè)置、定義基本的 HTML 元素樣式、可擴(kuò)展的 class，以及一個(gè)先進(jìn)的網(wǎng)格系統(tǒng)。這將在 Bootstrap CSS 部分詳細(xì)講解。
組件：Bootstrap 包含了十幾個(gè)可重用的組件，用于創(chuàng)建圖像、下拉菜單、導(dǎo)航、警告框、彈出框等等。這將在 布局組件 部分詳細(xì)講解。
JavaScript 插件：Bootstrap 包含了十幾個(gè)自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個(gè)包含這些插件。這將在 Bootstrap 插件 部分詳細(xì)講解。
定制：您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來(lái)得到您自己的版本。
示例如下：
<!DOCTYPE html> <html> <head> <title>Bootstrap 實(shí)例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron"> <h1>我的第一個(gè) Bootstrap 頁(yè)面</h1> <p>重置窗口大小，查看響應(yīng)式效果！</p> </div> <div class="row"> <div class="col-sm-4"> <h3>第一列</h3> <p>學(xué)的不僅是技術(shù)，更是夢(mèng)想！</p> <p>再牛逼的夢(mèng)想,也抵不住你傻逼似的堅(jiān)持！</p> </div> <div class="col-sm-4"> <h3>第二列</h3> <p>學(xué)的不僅是技術(shù)，更是夢(mèng)想！</p> <p>再牛逼的夢(mèng)想,也抵不住你傻逼似的堅(jiān)持！</p> </div> <div class="col-sm-4"> <h3>第三列</h3> <p>學(xué)的不僅是技術(shù)，更是夢(mèng)想！</p> <p>再牛逼的夢(mèng)想,也抵不住你傻逼似的堅(jiān)持！</p> </div> </div> </div> </body> </html>
輸出結(jié)果：
