Bootstrap est un framework JS/CSS créé par Twitter afin de rapidement développer l’architecture d’un site web tout en ayant des pages enrichies.
Afin de montrer cela, nous allons prendre comme exemple la page d’accueil pour PHPOffice.
Par où commencer ?
Tout d’abord, on va récupérer le package Bootstrap :
Et on va commencer à coder :
- Inclure le style dans le head :
1
2
3
4
5
6
7
8
9
10
11
| <link href="css/bootstrap.min.css" rel="stylesheet"></link>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<link href="css/bootstrap-responsive.min.css" rel="stylesheet"></link>
|
- Inclure le javascript à la fin du body :
1
2
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
|
- Créer la barre de navigation pour le menu :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="#">PHPOffice</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">PHPExcel</a></li>
<li><a href="#">PHPPowerPoint</a></li>
<li><a href="#">PHPProject</a></li>
<li><a href="#">PHPVisio</a></li>
<li><a href="#">PHPWord</a></li>
</ul>
</div>
</div>
</div>
</div>
|
- Ouvrir deux div qui permettent de créer une page responsive avec deux colonnes :
1
2
| <div class="container-fluid">
<div class="row-fluid">
|
- Créer la première colonne d’une largeur de 3/12ème de la page qui contiendra un menu de style sidebar :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="active"><a href="#">Home</a></li>
<li class="nav-header">PHPExcel</li>
<li><a href="#">...</a></li>
<li class="nav-header">PHPPowerPoint</li>
<li><a href="#">...</a></li>
<li class="nav-header">PHPProject</li>
<li><a href="#">...</a></li>
<li class="nav-header">PHPVisio</li>
<li><a href="#">...</a></li>
<li class="nav-header">PHPWord</li>
<li><a href="#">...</a></li>
</ul>
</div>
</div>
|
- Créer une div qui contiendra la deuxième d’une largeur de 9/12ème de la page :
- Créer une zone contenant le titre dans une hero unit :
1
2
3
4
| <div class="hero-unit">
<h1>PHPOffice</h1>
<p>...</p>
</div>
|
- On créer ensuite deux lignes responsive divisé en trois parties :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <div class="row-fluid">
<div class="span4">
<h2>PHPExcel</h2>
<p> </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>PHPPowerPoint</h2>
<p> </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>PHPProject</h2>
<p> </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h2>PHPVisio</h2>
<p> </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>PHPWord</h2>
<p> </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
|
- Fermer la div qui contient le contenu de la deuxième colonne :
- Fermer les deux div englobantes :
1
2
| </div><!--/row-->
</div><!--/.fluid-container-->
|
Et voilà, la page est créé via l’aide de Twitter Bootstrap.
Voici quelques ressources pour vous aider :