Bootstrap簡單HelloWorld入門教程

時間 2021-08-13

標籤 css html web django bootstrap 瀏覽器 dom ide 佈局欄目 Bootstarp 简体版

原文原文鏈接

By Django中國社區 at 2013-07-13 12:55html

這篇教程旨在讓你在20分鐘內學會使用twitter bootstrap建立一個站點。看完這個教程後你應該可以使用bootstrap來創建一個基本的響應式佈局的頁面，瞭解柵格系統，而且可以使用 bootstrap導航、導航條和了解響應式設計的基礎。這些所有都是使用twitter bootstrap所須要具有的知識。web

基本的HTML模板

咱們須要以一個基本的HTML模板，這樣咱們可以把所須要的bootstrap文件包含進來。下面就是咱們twitter bootstrap項目的開頭，複製這些代碼到一個文件中並將其命名爲index.html。django

<!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>

這段代碼中咱們已經添加了一些CSS使頁面的背景呈亮灰色，由於這樣咱們可以輕易地在咱們的設計中看見不一樣的列，使它更加容易理解。bootstrap

引入twitter bootstrap文件

爲了使用twitter bootstrap咱們僅僅須要把一個文件引入到咱們的模板當中來，引入文件有不少種方法，若是你想了解這些方法請查閱相關文檔。瀏覽器

基於本教程的出發點，咱們將會經過CDN來引入bootstrap-combined.min.css文件而不須要下載任何的文件。dom

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">

它可以使全部的twitter bootstrap CSS在咱們的模板中生效。ide

Twitter Bootstrap的容器

bootstrap的container類是很是有用的，它能在頁面中建立一個居中的區域，而後咱們可以把其餘位置的內容放到裏面。 container類等價於建立了一個具備靜態寬度而且magin值爲auto的一個居中的div框。twitter bootstrap的 container類的優勢在於它是響應式的，它會以當前屏幕的寬度爲基礎計算出最佳的寬度予以實用。佈局

在body標籤中，使用container類建立一個div。它會做爲頁面主要的放置其餘代碼的外層包裹。ui

<div class="container"></div>

若是你調整這個DIV的高度並將其背景顏色設置爲白色，你所看到的效果會是這樣：

標題和導航

如今咱們已經有一個地方能夠添加額外的HTML代碼，咱們能夠添加標題文本而後再建立站點的主要導航條。

加入以下的文本或者你選擇的文字到container類的div標籤當中。

<h1>TWITTER BOOTSTRAP TUTORIAL</h1>

如今並無多少新的東西，這僅僅是一個標題，讓咱們轉移到更有趣的方面，twitter bootstrap導航。

Bootstrap 有一個nav類讓咱們可以建立各類各樣的導航元素，你能夠在h1標籤以後加入以下的代碼。

<div class='navbar navbar-inverse'>
    <div class='navbar-inner 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相關的類擁有導航條全部的樣式，添加navbar-inverse類將會應用一個很酷的黑色風格，這是一個twitter bootstrap的常見搭配。我建議在這個樣式的基礎上進行拓展從而創造你的獨一無二的導航。但在這個教程中咱們仍然會使用基礎的bootstrap樣式。

在類爲navbar的DIV當中，咱們添加另外一個類爲nav-collapse的DIV併爲其添加行內樣式height:auto；這是告訴bootstrap當這個頁面在小於970px寬度的瀏覽器窗口當中時，它會提供一個壓縮的切換視圖。

若是你保存了index.html文件而後在瀏覽器中打開，當你調整瀏覽器窗口的寬度時你就可以看到這個變化，如圖所示。

大於979px

小於979px

另外，咱們能夠添加nav類到一個HTML無序列表元素中以便從bootstrap CSS文件中應用更多的樣式，也能夠添加一個active類到「HOME」列表項中。

主內容和側邊欄

咱們已經完成了站點的主導航，如今咱們須要添加主要內容區和一個側邊欄來支持更多的連接或導航路徑。請把下面的代碼添加到導航條以後。

<div id='content' class='row-fluid'>
  <div class='span9 main'>
    <h2>Main Content Section</h2>
  </div>
  <div class='span3 sidebar'>
    <h2>Sidebar</h2>
  </div></div>

這正是咱們須要弄懂的bootstrap的柵格系統，固然，bootstrap的官方文檔中涵蓋了更多的細節，但咱們將會以基礎開始,讓你更好地理解它。

柵格系統利用了12列的佈局，這意味着一個頁面能夠被分割成12個相同的列。下面這張從bootstrap官方文檔中拿到的圖片給出了一個很好的展現。

在咱們剛剛黏貼在導航條下面的代碼中你能夠看到名爲span9和span3的類。它們會把頁面分割成左邊9列寬度和右邊3列寬度的兩部分，造成咱們的內容區域和側邊欄。使用柵格系統的其中一個好處就是它會根據視窗寬度動態計算出列的寬度，所以你不須要寫任何的媒體查詢也能使你的站點工做在任何的屏幕分辨率下。

你能夠經過改變span的數量和調整瀏覽器的大小來觀察它們的效果。你會注意到當內容區小於724px的時候，這些列會垂直地堆放。

如今咱們在主內容區域把下列文本或者任何其餘的文本放在在h2標籤以後，這只是爲了把頁面拉長一點。

<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>

如今站點會像以下顯示：

側邊欄導航

你能夠在這裏看到全部的Twitter bootstrap爲咱們提供的導航元素。

咱們將要使用垂直選項卡來建立一個額外的導航區。複製和黏貼下面的代碼到sidebar的h2標籤以後。

<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>

這是一個簡單的展現！上面的代碼照字面理解僅僅是一個具備類爲nav-tabs和nav-stacked的無序列表，但它卻爲咱們創造了一個導航面板。

看看最後的效果，一個基於twitter bootstrap的響應式設計的頁面完成了。