Bootstrapを使用してCSSに触れることなくページ形成する方法 | how to form a page without touching CSS in Bootstrap.

ナビゲーションバーのアレンジ

リンクをナビゲーションバーの右側に配置する| Place the link on the right side of the navigation bar

HTML

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Bootstrap</a></li>
</ul>
</div>
</div>

サイト名をナビゲーションバーに入れる | Put the site name in the navigation bar

HTML

<div class="row">
<div class="col-sm-12">

<div class="menu navbar navbar-inverse">
<div class="navbar-header">
<button type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">メニュー</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">BICYCLE TRIP</a>
</div>

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Bootstrap</a></li>
</ul>
</div>
</div>
</div><!--col-->
</div>

サイト名にロゴ画像を付けてナビゲーションバーに入れる | Add a logo image to the site name and put it in the navigation bar

HTML

<div class="row">
<div class="col-sm-12">

<div class="menu navbar navbar-inverse">
<div class="navbar-header">
<button type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">メニュー</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img src="bicycle-34x20w.png" alt="">
BICYCLE TRIP</a>
</div>

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Bootstrap</a></li>
</ul>
</div>
</div>
</div><!--col-->
</div>

＊尚、ここではBootstapバージョン3.1.1を使用しています。 こちらからダウンロードできます。新しいバージョンをご使用だと機能しない部分も出てきます。| If you use a new version, some parts may not work.

やっぱり詳しい人から深く学びたい人はこちらをどうぞ。| If you want to learn more from those who are familiar with it, please click here.