本篇文章給大家談談利用bootstrap建立一個旅游網站頁面，以及html做一個旅游網站對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、怎么樣使用bootstrap快速開發(fā)一個簡單的前
• 2、bootstrap 網頁實例 常用樣式
• 3、使用bootstrap怎么實現(xiàn)一個頁面多選項卡，每個選項卡都是頁面
• 4、如何用 bootstrap 創(chuàng)建一個網站

怎么樣使用bootstrap快速開發(fā)一個簡單的前

Bootstrap 是一個用于快速開發(fā) Web 應用程序和網站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

歷史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產品。

最近空余時間比較多，今天先給大家介紹一個前端“樣式”框架——Bootstrap。

一、Bootstrap 整體架構

為什么在引言我稱為Bootstrap為一個前端樣式框架呢？可能這樣的稱謂并不是很準確，但是我覺得這樣的稱呼可以讓一些初學者可以更快明白和明白Bootstrap到底是一個什么東西。我總結東西不喜歡用一些高大上的詞語來加深某個知識的理解，反而更喜歡用一些大家通俗易懂的詞語來描述知識點。雖然這樣的描述方式可能會有點不準確，但是我覺得則沒什么大不了的，因為這樣的描述確實可以讓初學者更快理解這個知識。因為我在學習知識點的時候就有這樣的困惑，有些知識官方文檔都說的高大上，其實說白了也就是以前的一些東西，然后進行封裝使得開發(fā)更加簡單和快速罷了。所以這里我分享Bootstrap框架也是這樣的。并且內容組織方面也是為了讓初學者更好地掌握。因為我剛開始接觸的時候也是一個初學者。我自認為這樣的組織方式可以更快更好地理解知識。

對于Bootstrap，首先要介紹而是它的整體架構——它到底由什么組成的。相信大家看下面一張圖就可以很快明白Bootstrap中具體由哪些東西組成的。

從上面的圖，可以清楚看到，Bootstrap主要有下面幾部分組成：

12柵格系統(tǒng)——就是將屏幕平分12份（列）。

使用行(row)來組織元素（每一行都包括12個列），然后將內容放在列內。

通過col-md-offset-*來控制列偏移。

基礎布局組件——Bootstrap提供了多種基礎布局組件。如排版、代碼、表格、按鈕、表單等。

Jquery——Bootstrap所有的JavaScript插件都依賴于Jquery的。如果要使用這些JS插件，就必須引用Jquery庫。這也是為什么我們在除了要引用Bootstrap的JS文件和CSS文件外，還需要引用Jquery庫的原因，兩者是依賴關系。

CSS組件——Bootstrap為我們預實現(xiàn)了很多CSS組件。如下拉框、按鈕組、導航等。也就是說Bootstrap內容幫我們定義好了很多CSS樣式，你可以將這些樣式直接應用到之前的下拉框等元素里。

JavaScript插件——Bootstrap也為我們實現(xiàn)了一些JS插件，我們可以用其提供的插件要完成一些常用功能，而不需要我們再重新寫JS代碼來實現(xiàn)像提示框，模態(tài)窗口這樣的效果了。

響應式設計——這就是一個設計理念。響應式的意思就是它會根據屏幕尺寸來自動調整頁面，使得前端頁面在不同尺寸的屏幕上都可以表現(xiàn)很好。

Bootstrap就是由上面幾部分組成的。上面已經都每個組成部分做了一個簡單的介紹，接下來的內容無非是通過一些實例來對每個組成部分進行一個詳細的介紹罷了。

二、12柵格系統(tǒng)

Bootstrap定義12柵格系統(tǒng)，就是為了更好的布局。每個前端框架都首先要定義好的就是布局系統(tǒng)。在Bootstrap里面，就是利用行和列來創(chuàng)建頁面布局的。其布局有幾個原則：

行（row）必須包含在.container(固定寬度)或.container-fluid(100%寬度)中

每行都包含12列

將內容放置在每列中　

在bootstrap的柵格系統(tǒng)中，根據寬度將瀏覽器分為4種。其值分別是：自動（100%）、750px、970px、 1170px。

對應的樣式為超?。▁s）、小型（sm）、中型屏幕 （md）、大型 （lg）

其本就是通過媒體查詢定義最小寬度實現(xiàn)。所以，Bootstrap做出來的網頁向大兼容，向小不兼容！

在Bootstrap框架內，已預先定義好了屏幕大小的分界值，其分界值得定義就是通過媒體查詢來定義的。其定義方式如下：

/* 超小屏幕（手機，小于 768px） */

/* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優(yōu)先的嗎？） */

/* 小屏幕（平板，大于等于 768px） */

@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面顯示器，大于等于 992px） */

@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面顯示器，大于等于 1200px） */

@media (min-width: @screen-lg-min) { ... }

其實Win8應用開發(fā)中也應用了媒體查詢來實現(xiàn)可響應式的應用。所以大家以后如果聽到了可響應系統(tǒng)不要覺得很高深哦，其實就是框架為我們定義了媒體查詢，如果超過了媒體查詢中定義的最小寬度對應某個類型屏幕，通過這樣的方式，就可以在不同屏幕之間收縮元素大小來適應屏幕。然而Bootstrap提出的概念是移動設備優(yōu)先的，所以Bootstrap設計出來的頁面只能向大兼容，向小不兼容。

三、基礎布局組件

基礎布局組件就是Bootstrap框架內為一些基礎布局的標簽定義了一些統(tǒng)一的樣式。如Table、按鈕、表單等。下面讓我們看一個Table的例子：

!DOCTYPE html

html

head

meta charset="utf-8"

meta http-equiv="X-UA-Compatible" content="IE=edge"

meta name="viewport" content="width=device-width, initial-scale=1"

!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --

titleBootstrap 101 Template/title

!--因為這里沒有使用到Bootstrap的JS插件，所以就沒有引用Jquery組件--

!-- Bootstrap --

link rel="stylesheet" /bootstrap/3.3.4/css/bootstrap.min.css"

/head

body

h3默認樣式的Table/h3

table

caption表標題./caption

!-- 表頭，組合為t+head, t代表table的意思--

thead

tr

thID/th

thFirst Name/th

thLast Name/th

/tr

/thead

tbody

tr

th scope="row"1/th

tdTommy/td

tdLi/td

/tr

tr

th scope="row"2/th

tdBob/td

tdsan/td

/tr

tr

th scope="row"3/th

tdSam/td

tdwang/td

/tr

/tbody

/table

h3帶邊框的表格/h3

table

caption表標題./caption

!-- 表頭，組合為t+head, t代表table的意思--

thead

tr

thID/th

thFirst Name/th

thLast Name/th

/tr

/thead

tbody

tr

th scope="row"1/th

tdTommy/td

tdLi/td

/tr

tr

th scope="row"2/th

tdBob/td

tdsan/td

/tr

tr

th scope="row"3/th

tdSam/td

tdwang/td

/tr

/tbody

/table

!-- 更多表格樣式參考： /css/#tables--

!-- jQuery (necessary for Bootstrap's JavaScript plugins) --

script sr"/script

!-- Include all compiled plugins (below), or include individual files as needed --

script sr"/script

/body

/html

對于Button和表單的例子代碼這里就不貼了，大家可以通過下面的鏈接查看運行效果和查看源碼。也可以通過最后的下載文件來下載本專題的所有源碼。

四、CSS組件

CSS組件和基礎布局組件差不多，也就是Bootstrap為一些標簽定義了一些已有的樣式，這些樣式運行的效果都非常美觀，這樣每個公司或開發(fā)人員都不需要再去寫一篇樣式，從而加快開發(fā)效率。這里直接看一個導航的例子吧。說白這個東西，你用多了自然就熟了。

bootstrap 網頁實例 常用樣式

!DOCTYPE html

html

head

meta charset="utf-8"

titleBootstrap 實例 - 一個簡單的網頁/title

link rel="stylesheet" href=""

script src=""/script

script src=""/script

style

.fakeimg {

height: 200px;

background: #aaa;

}

/style

/head

body

div class="jumbotron text-center" style="margin-bottom:0"

h1我的第一個 Bootstrap 頁面/h1

p重置瀏覽器窗口大小查看效果！/p

/div

nav class="navbar navbar-inverse"

div class="container-fluid"

div class="navbar-header"

button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"

span class="icon-bar"/span

span class="icon-bar"/span

span class="icon-bar"/span

/button

a class="navbar-brand" href="#"網站名/a

/div

div class="collapse navbar-collapse" id="myNavbar"

ul class="nav navbar-nav"

li class="active"a href="#"主頁/a/li

lia href="#"頁面 2/a/li

lia href="#"頁面 3/a/li

/ul

/div

/div

/nav

div class="container"

div class="row"

div class="col-sm-4"

h2關于我/h2

h5我的照片:/h5

div class="fakeimg"這邊插入圖像/div

p關于我的介紹../p

h3鏈接/h3

p描述文本。/p

ul class="nav nav-pills nav-stacked"

li class="active"a href="#"鏈接 1/a/li

lia href="#"鏈接 2/a/li

lia href="#"鏈接 3/a/li

/ul

hr class="hidden-sm hidden-md hidden-lg"

/div

div class="col-sm-8"

h2標題/h2

h5副標題/h5

div class="fakeimg"圖像/div

p一些文本../p

p菜鳥教程，學的不僅是技術，更是夢想?。?！菜鳥教程，學的不僅是技術，更是夢想?。?！菜鳥教程，學的不僅是技術，更是夢想?。?！/p

h2標題/h2

h5副標題/h5

div class="fakeimg"圖像/div

p一些文本../p

p菜鳥教程，學的不僅是技術，更是夢想?。?！菜鳥教程，學的不僅是技術，更是夢想！??！菜鳥教程，學的不僅是技術，更是夢想?。?！/p

/div

/div

/div

div class="jumbotron text-center" style="margin-bottom:0"

p底部內容/p

/div

/body

/html

使用bootstrap怎么實現(xiàn)一個頁面多選項卡，每個選項卡都是頁面

如下的html代碼即可

ul class="nav nav-tabs"

li role="preentation" class="active"a href="#"Home/a/li

li role="presentation"a href="#"Profile/a/li

li role="presentation"a href="#"Messages/a/li

/ul

1、Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。 它由Twitter的設計師Mark Otto和Jacob Thornton合作開發(fā)，是一個CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動態(tài)CSS語言Less寫成。Bootstrap一經推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC(微軟全國廣播公司)的Breaking News都使用了該項目。 國內一些移動開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進行性能優(yōu)化而來。

2、Bootstrap是基于HTML5和CSS3開發(fā)的，它在jQuery的基礎上進行了更為個性化的完善，形成一套自己獨有的網站風格，并兼容大部分jQuery插件。

3、代碼

可以對Bootstrap中所有的CSS變量進行修改，依據自己的需求裁剪代碼。

如何用 bootstrap 創(chuàng)建一個網站

這篇教程旨在讓你在20分鐘內學會使用twitter

bootstrap創(chuàng)建一個站點?？赐赀@個教程后你應該能夠使用bootstrap來建立一個基本的響應式布局的頁面，了解柵格系統(tǒng)，并且能夠使用bootstrap導航、導航條和了解響應式設計的基礎。這些全部都是使用twitter

bootstrap所需要具備的知識。

首先需要說的是twitter

bootstrap是非常優(yōu)秀的一個前端開源框架，它為所有的組鍵都提供了詳細的用例，讓你能夠輕易地通過復制黏貼而附加到你的設計中。查閱官方文檔：twitter.github.com/bootstrap/index.html

基本的HTML模板

我們需要以一個基本的HTML模板，這樣我們能夠把所需要的bootstrap文件包含進來。下面就是我們twitter

bootstrap項目的開頭，復制這些代碼到一個文件中并將其命名為index.html。

!DOCTYPE

html

head

titleTwitter

Bootstrap

Tutorial

-

A

responsive

layout

tutorial/title

style

type='text/css'

body

{

background-color:

#CCC;

}

/style

/head

body

/body

/html

這段代碼中我們已經添加了一些CSS使頁面的背景呈亮灰色，因為這樣我們能夠輕易地在我們的設計中看見不同的列，使它更加容易理解。

關于利用bootstrap建立一個旅游網站頁面和html做一個旅游網站的介紹到此就結束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關注本站。