怎么創(chuàng)建屬于自己的Bootstrap站點(diǎn)-創(chuàng)新互聯(lián)
小編給大家分享一下怎么創(chuàng)建屬于自己的Bootstrap站點(diǎn)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),安仁企業(yè)網(wǎng)站建設(shè),安仁品牌網(wǎng)站建設(shè),網(wǎng)站定制,安仁網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,安仁網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。這篇教程旨在讓你在20分鐘內(nèi)學(xué)會(huì)使用twitter bootstrap創(chuàng)建一個(gè)站點(diǎn)?？赐赀@個(gè)教程后你應(yīng)該能夠使用bootstrap來建立一個(gè)基本的響應(yīng)式布局的頁(yè)面，了解柵格系統(tǒng)，并且能夠使用bootstrap導(dǎo)航、導(dǎo)航條和了解響應(yīng)式設(shè)計(jì)的基礎(chǔ)。這些全部都是使用twitter bootstrap所需要具備的知識(shí)。
首先我們需要說的是twitter bootstrap是非常優(yōu)秀的一個(gè)前端開源框架，它為所有的組鍵都提供了詳細(xì)的用例，讓你能夠輕易地通過復(fù)制黏貼而附加到你的設(shè)計(jì)中。
基本的HTML模板
我們需要以一個(gè)基本的HTML模板，這樣我們能夠把所需要的bootstrap文件包含進(jìn)來。下面就是我們twitter bootstrap項(xiàng)目的開頭，復(fù)制這些代碼到一個(gè)文件中并將其命名為index.html。
<!DOCTYPE html>
<head>
<title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
<style type='text/css'>
body {
background-color: #CCC;
}
</style>
</head>
<body>
</body>
</html>這段代碼中我們已經(jīng)添加了一些CSS使頁(yè)面的背景呈亮灰色，因?yàn)檫@樣我們能夠輕易地在我們的設(shè)計(jì)中看見不同的列，使它更加容易理解。
引入twitter bootstrap文件
為了使用twitter bootstrap我們僅僅需要把一個(gè)文件引入到我們的模板當(dāng)中來，引入文件有很多種方法，如果你想了解這些方法請(qǐng)查閱相關(guān)文檔。
基于本教程的出發(fā)點(diǎn)，我們將會(huì)通過CDN來引入bootstrap-combined.min.css文件而不需要下載任何的文件。
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
它能夠使所有的twitter bootstrap CSS在我們的模板中生效。
Twitter Bootstrap的容器
bootstrap的container類是非常有用的，它能在頁(yè)面中創(chuàng)建一個(gè)居中的區(qū)域，然后我們能夠把其他位置的內(nèi)容放到里面。container類等價(jià)于創(chuàng)建了一個(gè)具有靜態(tài)寬度并且magin值為auto的一個(gè)居中的div框。twitter bootstrap的 container類的優(yōu)點(diǎn)在于它是響應(yīng)式的，它會(huì)以當(dāng)前屏幕的寬度為基礎(chǔ)計(jì)算出最佳的寬度予以實(shí)用。
在body標(biāo)簽中，使用container類創(chuàng)建一個(gè)div。它會(huì)作為頁(yè)面主要的放置其他代碼的外層包裹。
如果你調(diào)整這個(gè)DIV的高度并將其背景顏色設(shè)置為白色，你所看到的效果會(huì)是這樣：
標(biāo)題和導(dǎo)航
現(xiàn)在我們已經(jīng)有一個(gè)地方可以添加額外的HTML代碼，我們可以添加標(biāo)題文本然后再創(chuàng)建站點(diǎn)的主要導(dǎo)航條。
加入如下的文本或者你選擇的文字到container類的div標(biāo)簽當(dāng)中。
<h2>TWITTER BOOTSTRAP TUTORIAL</h2>
現(xiàn)在并沒有多少新的東西，這僅僅是一個(gè)標(biāo)題，讓我們轉(zhuǎn)移到更有趣的方面，twitter bootstrap導(dǎo)航。
Bootstrap 有一個(gè)nav類讓我們能夠創(chuàng)建各種各樣的導(dǎo)航元素，你可以在h2標(biāo)簽之后加入如下的代碼。
<div class='navbar navbar-inverse'>
<div class='nav-collapse' style="height: auto;">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
</ul>
</div>
</div>navbar相關(guān)的類擁有導(dǎo)航條所有的樣式，添加navbar-inverse類將會(huì)應(yīng)用一個(gè)很酷的黑色風(fēng)格，這是一個(gè)twitter bootstrap的常見搭配。我建議在這個(gè)樣式的基礎(chǔ)上進(jìn)行拓展從而創(chuàng)造你的獨(dú)一無二的導(dǎo)航。但在這個(gè)教程中我們?nèi)匀粫?huì)使用基礎(chǔ)的bootstrap樣式。
在類為navbar的DIV當(dāng)中，我們添加另一個(gè)類為nav-collapse的DIV并為其添加行內(nèi)樣式height:auto；這是告訴bootstrap當(dāng)這個(gè)頁(yè)面在小于970px寬度的瀏覽器窗口當(dāng)中時(shí)，它會(huì)提供一個(gè)壓縮的切換視圖。
如果你保存了index.html文件然后在瀏覽器中打開，當(dāng)你調(diào)整瀏覽器窗口的寬度時(shí)你就能夠看到這個(gè)變化，如圖所示。
大于979px
小于979px
另外，我們可以添加nav類到一個(gè)HTML無序列表元素中以便從bootstrap CSS文件中應(yīng)用更多的樣式，也可以添加一個(gè)active類到“HOME”列表項(xiàng)中。
主內(nèi)容和側(cè)邊欄
我們已經(jīng)完成了站點(diǎn)的主導(dǎo)航，現(xiàn)在我們需要添加主要內(nèi)容區(qū)和一個(gè)側(cè)邊欄來支持更多的鏈接或?qū)Ш铰窂?。?qǐng)把下面的代碼添加到導(dǎo)航條之后。
<div id='content' class='row-fluid'>
<div class='span9 main'>
<h3>Main Content Section</h3>
</div>
<div class='span3 sidebar'>
<h3>Sidebar</h3>
</div>
</div>這正是我們需要弄懂的bootstrap的柵格系統(tǒng)，當(dāng)然，bootstrap的官方文檔中涵蓋了更多的細(xì)節(jié)，但我們將會(huì)以基礎(chǔ)開始,讓你更好地理解它。
柵格系統(tǒng)利用了12列的布局，這意味著一個(gè)頁(yè)面可以被分割成12個(gè)相同的列。下面這張從bootstrap官方文檔中拿到的圖片給出了一個(gè)很好的展示。
在我們剛剛黏貼在導(dǎo)航條下面的代碼中你可以看到名為span9和span3的類。它們會(huì)把頁(yè)面分割成左邊9列寬度和右邊3列寬度的兩部分，形成我們的內(nèi)容區(qū)域和側(cè)邊欄。使用柵格系統(tǒng)的其中一個(gè)好處就是它會(huì)根據(jù)視窗寬度動(dòng)態(tài)計(jì)算出列的寬度，因此你不需要寫任何的媒體查詢也能使你的站點(diǎn)工作在任何的屏幕分辨率下。
你可以通過改變span的數(shù)量和調(diào)整瀏覽器的大小來觀察它們的效果。你會(huì)注意到當(dāng)內(nèi)容區(qū)小于724px的時(shí)候，這些列會(huì)垂直地堆放。
現(xiàn)在我們?cè)谥鲀?nèi)容區(qū)域把下列文本或者任何其他的文本放在在h3標(biāo)簽之后，這只是為了把頁(yè)面拉長(zhǎng)一點(diǎn)。
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
現(xiàn)在站點(diǎn)會(huì)像如下顯示：
側(cè)邊欄導(dǎo)航
你可以在這里看到所有的Twitter bootstrap為我們提供的導(dǎo)航元素。
我們將要使用垂直選項(xiàng)卡來創(chuàng)建一個(gè)額外的導(dǎo)航區(qū)。復(fù)制和黏貼下面的代碼到sidebar的h3標(biāo)簽之后。
<ul class="nav nav-tabs nav-stacked"> <li><a href='#'>Another Link 1</a></li> <li><a href='#'>Another Link 2</a></li> <li><a href='#'>Another Link 3</a></li> </ul>
這是一個(gè)簡(jiǎn)單的展示！上面的代碼照字面理解僅僅是一個(gè)具有類為nav-tabs和nav-stacked的無序列表，但它卻為我們創(chuàng)造了一個(gè)導(dǎo)航面板。
看看最后的效果，一個(gè)基于twitter bootstrap的響應(yīng)式設(shè)計(jì)的頁(yè)面完成了。
結(jié)論
通過twitter bootstrap所提供的特性，我們給出了這個(gè)非常快速的bootstrap基礎(chǔ)教程,但花點(diǎn)時(shí)間練習(xí)并多多查閱官方的文檔，不久之后你就可以成為一個(gè)bootstrap的專家了。
在閱讀本教程之后你應(yīng)該懂得如何使用柵格系統(tǒng)，不同類型的導(dǎo)航和響應(yīng)式設(shè)計(jì)的基本原理。
以上是“怎么創(chuàng)建屬于自己的Bootstrap站點(diǎn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
分享名稱：怎么創(chuàng)建屬于自己的Bootstrap站點(diǎn)-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://www.rwnh.cn/article28/cejdjp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計(jì)公司、移動(dòng)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 品牌網(wǎng)站建設(shè)應(yīng)該展示什么樣的內(nèi)容？ 2020-11-21
- 品牌網(wǎng)站建設(shè)需要注意的事項(xiàng)有哪些？ 2022-05-24
- 做好品牌網(wǎng)站建設(shè)企業(yè)建站策劃方案很重要 2020-11-26
- 這些小元素是網(wǎng)站設(shè)計(jì)師帶給我們的美?? 2022-06-17
- 如何樹立起自己的品牌網(wǎng)站建設(shè) 2016-11-05
- 企業(yè)產(chǎn)品及品牌網(wǎng)站建設(shè)基本步驟 2016-11-14
- 如何有效做好品牌網(wǎng)站建設(shè)？ 2022-07-30
- A品牌網(wǎng)站建設(shè)要求！ 2019-08-04
- 怎么實(shí)現(xiàn)品牌網(wǎng)站建設(shè) 2016-10-12
- 品牌網(wǎng)站建設(shè)價(jià)格雜亂無章如何定義 2022-10-01
- 品牌網(wǎng)站建設(shè)的時(shí)候需要注意什么 2021-04-30
- 如何打造專屬的天河區(qū)品牌網(wǎng)站建設(shè)？ 2022-12-05