BootStrap入門<1>
8789 ワード
BootstrapはTwitterで発売されたフロントエンド開発用のオープンソースツールパッケージで、高速な開発インタフェースができます.確かに使いやすく、手書きのcss、jsコードをたくさん省いたとしか言えません.
公式サイトhttp://www.bootcss.com/は2つのバージョンを提供しており、3.2を選択しました.
ページでbootstrapを参照するには、次のファイルを導入します.
BootstrapはJqueryベースなので、導入前にJqueryライブラリhttp://jquery.com/を導入する必要があります.
以下に簡単な導入例を示します.
コードはテキストを3つの部分に分けて、まずbodyでclass=“container”属性を設定して、それから行class=“row”を確定して、更に3列のclass=“col-xs-4”に分けます
効果は次のとおりです.
(私が使っているのは世界の窓ブラウザのプレビューで、政府のせいでchromeは今ますます使いにくくなってきたので、いっそ使わないで、たくさんのブラウザを試して、最後に世界の窓を選んで、小さくて、軽くて、きれいです)
公式サイトhttp://www.bootcss.com/は2つのバージョンを提供しており、3.2を選択しました.
ページでbootstrapを参照するには、次のファイルを導入します.
BootstrapはJqueryベースなので、導入前にJqueryライブラリhttp://jquery.com/を導入する必要があります.
以下に簡単な導入例を示します.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="js/jquery.js"></sccript>
<script src="js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<div class="container">
<body>
<div class="row">
<h1>Hello, world!</h1>
<div class="col-xs-4">
<h2 class="page-header"> </h2>
<p>Bootstrap HTML CSS ， CSS Less 。Bootstrap ， GitHub ， NASA MSNBC（ ） Breaking News 。</p>
</div>
<div class="col-xs-4">
<h2 class="page-header"> </h2>
<p>Bootstrap jQuery ， jQuery ， ， jQuery 。</p>
</div>
<div class="col-xs-4">
<h2 class="page-header"> </h2>
<p>Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
</div>
</div>
</body>
</div>
</html>コードはテキストを3つの部分に分けて、まずbodyでclass=“container”属性を設定して、それから行class=“row”を確定して、更に3列のclass=“col-xs-4”に分けます
効果は次のとおりです.
(私が使っているのは世界の窓ブラウザのプレビューで、政府のせいでchromeは今ますます使いにくくなってきたので、いっそ使わないで、たくさんのブラウザを試して、最後に世界の窓を選んで、小さくて、軽くて、きれいです)