Bootstrap3 Get Started

Posted by mayuyu48 On 8月 24, 2014 0 Comment

Bootstrap3

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Originally, twitter inc. developed. This is useful to add design for web developer.

Get Started

Download

Download from Bootstrap web site and decompress.
This is composed of css, fonts, javascript

jQuery

bootstrap works with jquery.
You need to download jquery web site.
1.x, and 2.x works too.

And main sources are jqeury, bootstrap.js and bootstrap.min.css

<link href="bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet">

CDN

Several servers in the world have javascript(jQuery, bootstrap etc…)
Google, MaxCDN, Microsoft Ajax content Delivery Network
You can use bootstrap and jquery of hosting version.

Container

This is template of bootstrap

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="ID=edge">
		<meta name="viewport" content="width=devide-width, initial-scale=1.0">
		<link href="bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<div class="container" style="border:dotted 1px #000">
		<p>Contents</p>
		</div>
		<script src="bootstrap-3.2.0-dist/js/jquery-2.1.1.min.js"></script>
		<script src="bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
	</body>
</html>

I put jquery source in same directory as bootstrap.min.js

With Rails

The ref is other entry Bootstrap

Customization and Other Info

Bootstrap Customization
Less : Less
Sass : Sass, Github

Just Apply

This example is no container and no special setting.
Just only reading bootstrap related

<h1>h1<h1>
<h2>h2<h2>
<h3>h3<h3>
<h4>h4<h4>
<h5>h5<h5>
<h6>h6<h6>
<p>Body</p>
<pre>Test</pre>
<blockquote>Quote</blockquote>
<code>printf("Hello!");</code>

Jumbotron

Jumbotron is one of theme in Bootstrap.
This is example bootstrap

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="ID=edge">
		<meta name="viewport" content="width=devide-width, initial-scale=1.0">
		<link href="../bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<div class="jumbotron">
		<h1><span class="glyphicon glyphicon-book"></span>First bootstrap3</h1>
		<div class="alert alert-info">
		<button type="button" class="close" data-dismiss="alert" ario-hidden="true">&times;</button>
		<p>Bootstrap3 Test</p>
		</div>
		</div>
		<script src="../bootstrap-3.2.0-dist/js/jquery-2.1.1.min.js"></script>
		<script src="../bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
	</body>
</html>

TOPICS