Twitter Bootstrap導航欄：[左按鈕 - 中心文本 - 右按鈕]？ II

問題https://stackoverflow.com/questions/17375324/twitter-bootstrap-navbar-left-button-center-text-right-button作者@twilight-pony-inc已經關閉。Twitter Bootstrap導航欄：[左按鈕 - 中心文本 - 右按鈕]？ II

我認爲這個問題應該是：我可以用Twitter的Bootstrap構建一個移動應用程序，它看起來像一個本地應用程序。或者更具體地說明如何在左右兩邊建立一個標題和按鈕的導航欄。

例子：

enter image description here

藍色標題（導航欄），標題爲「溫度」和按鈕「後退」和「家」應與Twitter的引導來建立。

來源

2013-06-29 Bass Jobsen

有趣的問題。 What @ twilight-pony-inc提出的問題似乎微不足道，但並非如此。 Twitter的Bootstrap是建立在一個'敏感'的頭腦上。帶有TB的佈局構建將應用於顯示它的設備。你給的例子似乎是用像jQuery Mobile這樣的移動框架構建的。移動框架可以用來構建移動應用程序（僅）。當今的移動框架變得更具責任感，而即將推出的Twitter Bootstrap版本則採用移動優先方式。 Twitter的Bootstrap 3也將有一個移動網格。（另請參閱http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/grids/rwd-basics.html和http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/）

請考慮您是否需要一個移動框架來代替Twitter的Bootstrap。其次考慮使用Twitter的Bootstrap 3，因爲它會讓你的移動開發變得更容易。

Offcourse你也可以用twitter boostrap建立這樣的佈局。首先閱讀網格：http://twitter.github.io/bootstrap/scaffolding.html#gridSystem。先從一行導覽列，並在列拆分：

<div class="container navbar"> 
<div class="row"> 
<div class="span3 text-left"><button class="btn">back</button></div> 
<div class="span6 text-center"><h3>Title (centered)</h3></div> 
<div class="span3 text-right"><button class="btn">Home</button></div> 
</div> 
</div>

還要考慮流體格在這裏：http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem

這會給你兩個按鈕，一個導航欄。但在小型/移動屏幕上（低於768像素），您的佈局會中斷。低於768 px yor列（帶有classX類的div）將堆疊（並獲得100％寬度）。您可以使用媒體查詢來解決此問題：

@media (max-width:767px) 
{ 
    .navbar div[class*="span"] { float: left;} /* float left */ 
    .navbar div.span3 { width:25%; } 
    .navbar div.span6 { width:50%; } 
    body {padding:0;} 
}

這將在小屏幕上創建一個包含三列的行。見：http://www.bootply.com/66054或下面的圖像：

enter image description here

的CSS使移動佈局流體引起colums寬度由百分比（連續100％）設定。

Twitter的引導程序3 默認情況下，TB3具有流體佈局。 TB3有兩個網格，用於768+像素寬度的屏幕和一個小型移動網格。因爲您可以使用移動網格，因此您不需要媒體查詢就可以使用TB3獲得上述佈局。在TB3中，列的寬度由col-span- {X}類設置。同樣，對於小網格，使用col-small-span- {X}來設置寬度。因此，與Twitter的引導3

你可以建立你的導航欄：

<div class="container navbar"> <div class="row"> <div class="col-span-3 col-small-span-3 text-left"><button class="btn">back</button></div> <div class="col-span-6 col-small-span-6 text-center"><h3>Title (centered)</h3></div> <div class="col-span-3 col-small-span-3 text-right"><button class="btn">Home</button></div> </div> </div>

Twitter的引導3定義了三個網格：用於手機微型電網（< 768px），小網格片（> 768px）以及Destkops的中大型網格（> 992px）。這些網格的行類前綴是「.col-」，「.col-sm-」和「.col-lg-」。中大型網格將堆疊992像素以下的屏幕寬度。小網格在768像素以下，小網格從不堆疊。除了總是會堆疊元素的舊手機（移動第一設計）。

出於這個原因，你應該使用「.col-」前綴爲您的移動應用：

<div class="container navbar"> 
<div class="row"> 
<div class="col-3 text-left"><button class="btn btn-default">back</button></div> 
<div class="col-6 text-center"><h3>Title (centered)</h3></div> 
<div class="col-3 text-right"><button class="btn btn-default">Home</button></div> 
</div> 
</div>

參見：http://bootply.com/73382

來源

2013-06-29 18:52:14

Twitter Bootstrap導航欄：[左按鈕 - 中心文本 - 右按鈕]？ II

回答

相關問題