html & css #10 : bootstrap
TRANSCRIPT
Bootstrap
1. Bootstrap ?
What ?
« Bootstrap is the most popular HTML, CSS, and JS framework
for developing responsive, mobile first projects on the web. »
http://getbootstrap.com
Framework ?
A software framework is an abstraction in which software providing generic functionality can be selectively changed by additional user-written code, thus providing application-specific software.http://en.wikipedia.org
Mobile first ?
« Adapting the design process to start by designing the mobile
version of an application first and then going upwards. »
Most popular ?
Source Google Trends
The story
Jacob Thornton Mark Otto Twitter
+ +
2. Why Bootstrap ?
Save time“All we have to decide is what to do with the time that is given us.” - Gandalf
Customization« Design is not just what it looks like and feels like. Design is how it works. » - Steve Jobs
Consistency« Trust is built with consistency. » Lincoln Chafee
Responsiveness« Adapt or perish, now as ever, is nature's inexorable imperative. » - H. G. Wells
3. Getting started
Download http://getbootstrap.com/getting-started/#download
Basic template<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Exemples template
http://getbootstrap.com/getting-started/#examples
4. Grid system
Containers (1)
« Bootstrap requires a containing element to wrap site contents and house our grid system. »
http://getbootstrap.com/css/#overview-container
Containers (2)
<div class="container"> ... </div>
<div class="container-fluid"> ... </div>
Fixed width Full width
Rows (1)
« Use rows to create horizontal groups of columns. »
http://getbootstrap.com/css/#grid-intro
Rows (2)
Rows must be placed within a .container or .container-fluid for proper alignment and padding.
Only columns may be immediate children of rows
Rows (3)
<div class="container"> <div class="row">...</div> <div class="row">...</div> <div class="row">...</div> </div>
Columns (1)
« Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size increases »
http://getbootstrap.com/css/#grid-intro
Columns (2)
Content should be placed within columns
Grid columns are created by specifying the number of twelve available columns you wish to span.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes
Columns (4)
<div class="container"> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-.md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div>
Columns (5)
<div class="container"> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div>
<div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div>
<div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div> </div>
4. Customize
NEVER, EVER modify the bootstrap.css file
Every time you hack bootstrap files God kills a kitten
Add a Custom Stylesheet
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
Applying Custom Styles
h1{ color: red; }
Merci pour votre attention.