SOFTELメモ

Softel Inc.

twitter bootstrap を とにかく手軽に始められる雛形

問題

twitter-bootstrap

そんなとき。

答え

以下のようなHTMLからスタートすると、何も用意する必要がなく、HTML一枚から始められるでしょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrapの雛形です</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="navbar navbar-static-top">
		<div class="navbar-inner">
			<div class="container">
				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="brand" href="#">Project name</a>
				<div class="nav-collapse collapse">
					<ul class="nav">
						<li class="active"><a href="#">Home</a></li>
						<li><a href="#about">About</a></li>
						<li><a href="#contact">Contact</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<div class="container">
		<h1>Bootstrap すぐ使えるよ!</h1>
		<div class="row">
			<div class="span4">
				<h2>見出し</h2>
				<p>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</p>
				<p><a class="btn" href="#">詳しく見る</a></p>
			</div>
			<div class="span4">
				<h2>見出し</h2>
				<p>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</p>
				<p><a class="btn" href="#">詳しく見る</a></p>
			</div>
			<div class="span4">
				<h2>見出し</h2>
				<p>テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト</p>
				<p><a class="btn" href="#">詳しく見る</a></p>
			</div>
		</div>
	</div>
</body>
</html>

各種CDNから、jquery、bootstrap(css, js)をいただいてくるので、あとはHTMLを書けばOK!

上のHTMLをコピーして、新規HTMLファイルに貼り付けるだけ。


ナビゲーションが不要なら、bodyの次にきている .navbarを削除。


ナビゲーションを画面上に固定したかったら、2つのスタイルシートの間に以下を入れて、.navbar-static-top を .navbar-fixed-top にする。

<style>
	body {
		padding-top: 60px;
	}
</style>

レスポンシブしなくてよければ、2つ目のスタイルシート削除(bootstrap-responsive.min.css 削除)。


他、調整は、twitter BootstrapのWebサイト参照。

関連するメモ

コメント