タグ: bootstrap

カテゴリー
bootstrap Web

Bootstrap 簡単インストール

Bootstrap はレスポンシブでモバイルを前提にしたWebプロジェクトを開発するためのHTML, CSS と Javascript のフレームワークです。(Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.)

Webプログラム開発はできてもデザインはちょっとという人にはもってこいのフレームワークです。

インストール
https://getbootstrap.com/getting-started/ から「Download Bootstrap」ボタンをクリックして、”bootstrap-3.3.5-dist.zip” をダウンロードします。

bootstrap フォルダとして展開します。

bootstrap
– css
– fonts
– js

以下は基本となるテンプレートです。jquery のCSS, JSと同様に、ダウンロードした bootstrap.min.css, bootstrap.min.js を読み込みます。 また、上の赤字の meta タグは先頭に記述する必要があります。

<!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 -->
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<!-- Bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="lib/jquery/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
<!-- Page title -->
    <title>Hello Bootstrap</title>
</head>

<body>
Hello world.
</body>
</html>

デモページはこちら。