注目の記事 PICK UP!

bootstrap Bootstrap簡単入門(3)

aku02

とりあえず画面いっぱいに広げたい場合は自然に広がるんだけど、コンテンツをcountainerという呪文でくくると自動的に拡縮してくれます。
前回はFixmenuとスライダーを学習しました。

前回の学習

今回の学習例はこちら

学習するというより呪文の貼り付けで簡単に格好のよいメニューと動く画像を2つ張り付けただけです。
今回は格好の良いタブの部品の貼り付けです。

Branketsに次のソースをコピーして貼り付けてみましょう。
保存してライブビューをしてみます。
赤色が呪文で青色が変更する箇所です。
</head>の前に次の呪文を唱えると幅が変わります。

<style>
.nav li{width:25% !important;}
.nav hover{color:#fff !important;background-color: #f00 !important;}
.active a{color:#fff !important;background-color: #00f !important;}
</style>
これはスタイルを変える呪文で#fffは白で#f00は赤で#0f0は緑で#00fは青です。
その色をネツトで調べて変更します。
25%は画面の1/4で表示しようという意味となります。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags –>
<title>Bootstrap 101 Template</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>

</head>

<body>

<h1>Hello, world!</h1>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
<!– Button trigger modal –>

<div>

<!– Nav tabs –>
<ul class=”nav nav-tabs” role=”tablist”>
<li role=”presentation” class=”active”><a href=”#home” aria-controls=”home” role=”tab” data-toggle=”tab”>Home</a></li>
<li role=”presentation”><a href=”#profile” aria-controls=”profile” role=”tab” data-toggle=”tab”>Profile</a></li>
<li role=”presentation”><a href=”#messages” aria-controls=”messages” role=”tab” data-toggle=”tab”>Messages</a></li>
<li role=”presentation”><a href=”#settings” aria-controls=”settings” role=”tab” data-toggle=”tab”>Settings</a></li>
</ul>

<!– Tab panes –>
<div class=”tab-content”>
<div role=”tabpanel” class=”tab-pane active” id=”home”>
文書1
</div>
<div role=”tabpanel” class=”tab-pane” id=”profile”>
文書2
</div>
<div role=”tabpanel” class=”tab-pane” id=”messages”>
文書3
</div>
<div role=”tabpanel” class=”tab-pane” id=”settings”>
文書4
</div>
</div>

</div>
</body>
</html>

tab

こんな感じになったはずです。
この内容を<div class=”countainer”> と</div>で挟み撃ちすると真ん中に寄りますので読みやすくなります。
前回のFixmenuとスライダーを合わせると格好よくなります。

制作例

 

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. sns2

    Bootstrap簡単入門

  2. 26fde19616bb4dcf6b2a523162f7428c_m

    bootstrap Bootstrap簡単入門(4)

  3. bootstrap5

    bootstrap Bootstrap簡単入門(2)


周南市のホームページ制作会社ウィルコムはあなたのサービスを的確なターゲットに誘導させます

魅力的な動画を制作します
これからのWEB制作はこのサービスを提案します

オリジナルの楽曲を制作します
現在は無料ダウンロード実施中です
>

ホームページ制作現場から「ぶっちゃけシリーズ開始」

お気軽にお問合せ下さい
おおよその金額がわかると思います

ワードプレスのテンプレートを紹介しています
クールなホームページデザインをご一緒に見てみましょう

こんな感じの画面でホームページを制作しています

どんな戦略でどんな会社がどのように闘ってきたか
成功したか破滅したかそんなお話をします

アンドロイドマーケットでは4万件以上ダウンロードされてます

アンドロイドのレッスン場です
その後はベクトルを学習してみてください
PAGE TOP