Bootstrapを使用してCSSに触れることなくページ形成する方法➁

 Bootstrapを使用してCSSに触れることなくページ形成する方法

完成イメージはこちらをクリック

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

リンクをナビゲーションバーの右側に配置する


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>

サイト名をナビゲーションバーに入れる

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>

サイト名にロゴ画像を付けてナビゲーションバーに入れる

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.



この本を参考に学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません(ToT)
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円程ならコスパよく、買っておいてよかったと満足してます。


レベルアップにプロからの学びを。

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。

就職・転職支援

ITエンジニア向けIT求人・転職サイト