BOOTSTRAP

SUMMARY

Summary...................................................................................................................................... 1
Bootstrap ...................................................................................................................................... 4
Bootstrap at full speed
What is that
Download
Installation .............................................................................................................................................................. 4
Usage
CSS classes to style your site
A layout grid (that we place in a container)................................................................................... 5
Complete templates for layout
Complete Bootstrap tutorial: consult it without moderation !!!..................................................................................... 5
Introduction
Prerequisites
CSS frameworks ..................................................................................................................................... 6
Usage ................................................................................................................................................... 6
Advantages ................................................................................................................................................... 6
Cross-browser : [Link]
Cross-device: design responsive
Speed................................................................................................................................................................... 6
Disadvantages ............................................................................................................................................. 6
Adapter Bootstrap : LESS............................................................................................................................ 7
Resources.................................................................................................................................................. 7
Official resources .............................................................................................................................................. 7
Tutorial
Testing, learning and/or development tool ........................................................................................ 7
Use by CDN..................................................................................................................................8
CDN: what is it?
CDN of the css file: bootsrapcdn
CDN of js files: google and bootstrapcdn................................................................................................. 8
Example
Installation on your machine: tutorial ............................................................................................................9
Utility: alternative to the CDN
Download Bootstrap
Minimum 9
Advanced
Download content....................................................................................................................... 9
Minimum 9
With sources ........................................................................................................................................................... 9
Contents of the dist folder.............................................................................................................................. 9
Subfolder css
Subfolder fonts
Subfolder js
Download the jQuery plugin
Installation of the bootstrap directory at the root
Production environment.............................................................................................................................. 10
Development Environment
Look at the bootstrap class code ............................................................... 10

Bootstrap – page 1/36

 Load the bootstrap library in an HTML page...
Autonomous loading......................................................................................................................................... 11
Head and javascript of a bootstrap HTML file.......................................................... 12
<head>...................................................................................................................................................... 12
Principles
Example: 00_chargerBS.html............................................................................................................................... 12
<script>..................................................................................................................................................... 12
The grid ................................................................................................................................................ 14
Elements................................................................................................................................................... 14
Presentation.......................................................................................................................................................... 14
Line...................................................................................................................................................................... 14
Columns ................................... 14
Container and container-fluid (responsive)............................................................................................................. 14
Examples............................................................................................................................................................... 14
Basic behavior............................................................................................................................ 15
Example: 01_1_grid.html ................................................................................................................................... 15
Example: 02_2_grid_float.html.......................................................................................................................... 16
Responsive behaviors ..................................................................................................................... 17
Principles................................................................................................................................................................ 17
Example: 02_stack_grid.html.................................................................................................................. 17
Layout with the grid..................................................................................................................... 19
Variable rows and columns..................................................................................................................... 19
Skip columns: offset ..................................................................................................................... 20
Imbrication of elements ............................................................................................................................ 21
Shift columns
Classic layout .................................................................................................................... 23
Classic layout............................................................................................................................. 23
Principles................................................................................................................................................................ 23
Test ....................................................................................................................................................................... 23
Code...................................................................................................................................................................... 23
Version with multiple sections
Test 25
Layout with hidden asides ....................................................................................................... 26
Objectives
Tests
Solutions 27
Dropdown menu .................................................................................................................................... 29
Objective: menu reduced to a button on smartphone
Menu format ordination: ............................................................................................................................................... 29
Example ................................................................................................................................................................ 29
Code...................................................................................................................................................................... 29
Dropdown menu version........................................................................................................................... 30
Menu format order: ............................................................................................................................................... 30
Example ................................................................................................................................................................ 31
Code 31
Photo layout .................................................................................................................. 32
Resolution problem
Principle ................................................................................................................................................................. 32
Vague example !
Solution..................................................................................................................................................... 32
Other examples....................................................................................................................................... 33
Photo pagination with JavaScript
Lists of all kinds............................................................................................................................................. 33
Example of advanced page..................................................................................................................................... 33
Bootstrap Basic Components .............................. 34
Emphasis on the text............................................................................................................................ 34

Bootstrap – page 2/36

 List .......................................................................................................................................................... 34
Table ......................................................................................................................................................... 34
Form
Image
Button
Icons ....................................................................................................................................................... 34
etc. !.......................................................................................................................................................... 34
More complex Bootstrap components ......................................................................................... 35
Collapse
Navigation bar .................................................................................................................................. 35
Pagination
List and panel
Media
Navigation
Carousel
etc. !.......................................................................................................................................................... 35
Bootstrap Templates............................................................................................................................. 36

Edition: November 2018

Bootstrap – page 3/36

 BOOTSTRAP

The provided text is a URL and cannot be translated.

[Link]
[Link]

Bootstrapping at full speed

What's that?
• CSS framework, styled and responsive.
• Created by the developers of Twitter
• Based on HTML 5 and CSS3.
• Quality JQuery plugins shipment
• Features a simple and effective grid system to organize the visual layout of a page
web
• Add style to buttons, forms, navigation...
• Propose layout templates
• Allows you to design a website quickly and with few lines of added code.

Download
Download Bootstrap:[Link]
JQuery plugins are not installed by default in Bootstrap. They can be retrieved here:
[Link] the plugins in the js folder.

Installation
Install the bootstrap folder with its 3 folders css, fonts, and js at the root of the site.

Usage
To use bootstrap in an HTML file:

Ø In the head, we link a .css file

<link
href="[Link]
[Link]" rel="stylesheet">

Ø In the body, we link 2 .js files (bootstrap uses jquery)

<script
src="[Link] </script>

<script
src="[Link]
.[Link]"></script>

Bootstrap – page 4/36

CSS classes to style your site

Ø Simple recap of HTML tags: <h1>

[Link]

Ø Improved buttons: <button type="button" class="btn btn-primary">

[Link]

Ø Pagination system: <ul class="pagination">

[Link]

Ø Collapse system: <div id="demo" class="collapse">

[Link]

Ø etc.

A grid layout (that is placed in a container)

Unable to translate the provided URL.
<div class="container">
<div class="row">
<div class="col-sm-4">
etc.

Ø Complete guide to the grid:

[Link]

Complete templates for layout

[Link]
Unable to translate URL.

Complete Bootstrap tutorial: to be consulted without moderation !!!

[Link]

Bootstrap – page 5/36

Introduction

Prerequisites
HTML-CSS

CSS frameworks
There are many of them: Elasticss, Knacss, Blueprint, unsemantic, YUI, 52Framework, BlueTrip,
ez-css, Pure, Gumby, etc.
Foundation: very advanced
Bootstrap: very advanced and very popular

Usage
• Simple: it is used by linking a file containing the classes defined by bootstrap.
• Then we can add these classes to the HTML tags to achieve styled results and
responsive.
• Bootstrap offers good [Link] translatable text found in the provided URL.
• There are many resources on the web:The given text is a URL and does not require translation.
• Bootstrap ensures continuous evolution.

Advantages

Cross-browser: [Link]
Abstraction of browsers that will all react the same way thanks to [Link]: small CSS file
who establishes rules to have the same rendering regardless of the browser used.

Cross-device: design responsive

Screen abstraction (responsive design)

Speed
Allows for quickly designing a stylish website: pre-existing structures, homogeneous style,
positioning grid (12 columns in Bootstrap), styled elements (button, bar)
navigation, …), etc.

Disadvantages
Training time: very quick for Bootstrap
Normalization of graphics: all sites look the same!
But Bootstrap is configurable with LESS.
Based on HTML-4. With the development of HTML-5, the Bootstrap syntax becomes cumbersome.

Bootstrap – page 6/36

Bootstrap Adapter: LESS
To customize Bootstrap, we use LESS which extends CSS with dynamic behavior.
using variables, abstract classes, operations, and functions. LESS works
both on the client side (the browsers) and on the server side, with [Link].
Unable to access the content of the provided URL.
[Link]

Resources

Official resources
Site :[Link]
Blog :[Link]
Github :Invalid input for translation. Please provide text to translate.

Tutorial
The provided text is a URL and cannot be translated.
[Link]
Unable to access or translate content from external links.
Unable to translate a URL. Please provide text for translation.

Testing, learning and/or development tool

[Link]

Bootstrap – page 7/36

Use by CDN

CDN: what is it?

CDN: Content Delivery Network: server that provides the services.
The CDN will allow us to install nothing and retrieve the files directly from a
server!
So, there is no installation to do!
The bootstrapcdn site provides the bootstrap .css and .js files:[Link]
Google provides the jquery .js files:Unable to access external URLs for translation.

CDN of the css file: bootsrapcdn

Bootstrapcdn for [Link]:Invalid input: URL provided, please provide text to translate.
<link
href="[Link]
[Link]" rel="stylesheet">

CDN for js files: google and bootstrapcdn

Bootstrapcdn for [Link]:[Link]
Google for [Link]:Invalid input. Please provide a text for translation.
<script
src="[Link] </script>

<script
src="[Link]
.[Link]"></script>

Example
The provided text is a URL and does not contain any translatable content.

Bootstrap – page 8/36

Installation on your machine: tutorial

Usefulness: alternative to the CDN

In order to perform tests without a network and have a controlled version of BS and JS, one can do
an installation on his machine.
The chapter presents the steps of the installation.

Download Bootstrap
[Link]

Minimum
• allows you to retrieve the files necessary for operation
Bootstrap. It's enough to use bootstrap.

Advanced
• allows you to retrieve all the source files as well.
• it is a port of Bootstrap in Sass for project users who
use Sass (Rails, Compass...).

Download content

Minimum
If we only download Bootstrap:
we get a directory "dist" with 3 subdirectories:
• dist/css
• dist/fonts
• dist/js.

With sources
If you download the sources: you have a folder with several files and folders. The only folder
the dist folder is useful.

Contents of the dist folder

Subfolder css
It contains the following files:
• [Link]: it includes the basic classes of Bootstrap
• [Link]: it contains specific style rules to create a theme
specific for Bootstrap
• The min versions are the production versions: the code is on one line so as not to
take up all the space. Non-min versions allow browsing through the code.

Bootstrap – page 9/36

 • The map files: [Link] and [Link] allow you to find
the original location of a line of code from the code 'min'. This feature is
usable with the latest versions of Chrome and Firefox. These files are not
essential for operation.

Subfolder fonts
The directory contains icons in different formats: svg, ttf, woff, eot
[Link]
[Link]

Subfolder js
• It contains the files [Link] and [Link] which are only useful if we use jQuery plugins.
• [Link] contains the JavaScript code for Bootstrap components.
• The versions are the production versions: the code is on one line so as not to take up
the whole place.

Download the jQuery plugin

JQuery plugins are not installed by default in Bootstrap.
They recover here:[Link]
Attention, a version < 3 is required for it to work with bootstrap (2016) !!!
You can find it here:
Unable to access the requested URL.
They need to be placed in the js folder.

Installation of the bootstrap directory at the root

At the root of the site, we create a bootstrap directory and put inside it the 3 subdirectories css,
fonts and js

Production environment
We only need: css/[Link], the fonts folder, js/[Link],
js/[Link]

Development environment
We add css/[Link], the fonts folder, js/[Link], js/[Link] in order to be able to consult.
the source files.

Look at the code of bootstrap classes

To understand what a bootstrap class does, one can always look at the code in the
[Link] file.

Bootstrap – page 10/36

Load the bootstrap library in an HTML page

Autonomous loading

Ø CSS file
<head>
…
<link href="bootstrap/css/[Link]" rel="stylesheet">
</head>

Ø js files
The JavaScript files will load as follows:
<script src="bootstrap/js/[Link]"></script>
<script src="bootstrap/js/[Link]"></script>

Bootstrap – page 11/36

Head and javascript of a bootstrap HTML file

<head>

Principles
Link the bootstrap file.
Specific cases:
• IE
• Mobile
• IE < 9

Example: 00_loadBS.html
Principles:
The page displays a simple Hello World.
She links the [Link] file in the <head>.
She links
<head>
Bootstrap template
<meta charset="utf-8">
<!-- bootstrap link: -->
<link href="../bootstrap/css/[Link]"
rel="stylesheet">

<!-- for IE : -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

for mobiles:
<meta name="viewport" content="width=device-width, initial-

<!-- for IE 8 -->

<!--[if lt IE 9]>
<script
src="[Link]

<script
src="[Link]

<![endif]-->

</head>

<script>
2 files to load for JavaScript:
• the bootstrap file
• a Google jQuery API
In a <script> tag, just before the </body>, we include references to the .js files:

Bootstrap – page 12/36

 <script
src="[Link]
[Link]"></script>
<script src="bootstrap/js/[Link]"></script>
</body>

Bootstrap – page 13/36

The grid

Elements

Presentation
Unable to access the content of the provided link. Please provide the text you want translated.
[Link]
The grid is a division of the page into 12 columns that all have the same width.
The width of the columns adjusts to the width of the window.
For the lines, the size adjusts to what we put inside. It's classic HTML: the height
The function of a cell will depend on what we put inside it.

Here in columns 3, 6, and 11, the height of the block adapts to the text.

Line
class=row

Columns
class=col-XX-*
XX: xs, sm, md or lg. These are the formats that modify behavior.
from 1 to 12
examples :
col-xs-1 for a 1 column element
col-md-8 for an element of 8 columns

Container and container-fluid (responsive)

Ø Principles
The grid must be contained within a container or container-fluid.
2. container and container-fluid are blocks for grouping tags.
3. The container leaves a margin on the right and left.
The fluid container stretches across the entire window.

Examples
[Link]
[Link]
[Link]
[Link]

Bootstrap – page 14/36

Basic behavior

Example: 01_1_grid.html

Ø Display
Here we display a block of 4 and a block of 8.
The block of 4 contains a lot of text.

Ø Test
[Link]

Ø HTML
<div class="container-fluid">

<div class="col-xs-4">
<p>
Block of 4
Bla bla bla
</p>

<div class="col-xs-8">

Block of 8
</p>
</div>

Ø HTML Structure
A "container-fluid" div that contains our bootstrap blocks.
A div for the line: row
In the line: one div per column: one column of 4 and one column of 8.

Ø CSS
.row { /* all rows */
text-align: center;
line-height: 40px; /* line height */
}

[class*="col-"] { /* all attributes class = to %col-% */ }

border: 1px solid black;
border-radius: 6px; /* rounded corners */
}

[class*='-4'] { /* all class attributes = to %-4% */

background-color: aqua;

Bootstrap – page 15/36

 }

row : we control the line in general : centered text, etc.

[class*="col-"] : we control all the columns.
[class*="-4"] : we control the columns of width 4

Ø CSS syntax reminders:

Poly "CSS Basics", paragraph "CSS Syntax: Building Selectors":
[]: targets an attribute of any selector (tag).
The [class] targets the 'class' attribute.
[class*="-4"]: targets class attributes = %-4% (the class name contains "-4").

Example: 02_2_grid_float.html

Ø Display
We display a block of 4 and a block of 6. There are 2 columns left that are not in a block.
You can put text in these two columns: it is on the line (in the 'row' div)
If we put a lot of text, we see that the blocks are handled like 'floats': the text that we ...
surround the previous blocks.

"Float" behavior of the blocks:

bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Ø Test
[Link]

Bootstrap – page 16/36

Responsive behaviors

Principles
The formats of the columns define behavior based on screen size.
The blocks will stack or not depending on the screen size and the xs, sm, md, or lg format.
The choice of format defines the 'stacked if size < format'.
• col-xs-*: x small (smartphone): always aligned
• col-sm-*: small (tablet): aligned if >=768px, stacked otherwise (stacked if smartphone).
• col-md-* : medium (laptop) : aligned if >=992px, stacked otherwise (stacked if
. tablet)
• col-lg-*: large (fixed screen): aligned if >=1200px, stacked otherwise (stacked if mobile).

Example: 02_stacking_grid.html

Ø Principles
We present four rows with two columns in each row: of 4 and of 8.
These columns will be xs, sm, md, or lg.
Their behavior will therefore be different depending on the size of the screen.
The lg columns are the first to stack when the screen decreases.
The xs columns will never stack.
Note that when stacking, the two blocks (of 4 and 8) have the same width.

Ø Test
[Link]
ml

Ø HTML
<div class="container-fluid">
<div class="row">
Width xs 4
Width xs 8 - always aligned

<div class="row">
Width sm 4
Width sm 8 - aligned if >= 768
px</div>

Bootstrap – page 17/36

 <div class="row">
Width md 4
Width md 8 - aligned if >= 992
px</div>

<div class="row">
Width lg 4
Width lg 8 - aligned if >=1200 px
8

<script>
function myFunction() {
Width of the
window:
}

Ø CSS
.row{ /* all rows */
text-align: center;
line-height: 40px; /* line height */
}
[class*="-4"] { /* all attributes class = to %-4% */
background-color: aqua;
}
[class*="-8"] { /* all class attributes = to %-8% */
background-color: pink;
}
[class*="col-"] { /* all class attributes = to %col-% */ }
border: 1px solid black;
border-radius: 6px; /* rounded corners */
}

Ø JavaScript Note
We define a JavaScript function that displays the screen width in pixels and the screen type.
(smartphone, tablet, laptop, desktop computer)
This function updates the HTML page with an 'innerHTML' (DOM management).
It is called by an 'onload' and an 'onresize' in the <body> (event handling).

Ø Remark
The two columns must have the same format (lg in col-lg-4 and col-lg-8 for example)
Otherwise, we get strange behavior.

Bootstrap – page 18/36

Layout with the grid
Unable to translate URL content. Please provide text for translation.

Variable rows and columns

Ø Example: 03_complex_grid.html
[Link]

<div class="row">
1 col
2 columns
3 columns
6 columns

<div class="row">
12 columns

<div class="row">
4 columns
8 columns
</div>

Bootstrap – page 19/36

Skip columns: offset

Ø Syntax
class="col-XX-offset-*"

Ø Example: 04_grid_with_holes.html
[Link]

<div class="row">
3 columns
6 columns
3 columns

<div class="row">
3 columns
3 columns

Bootstrap – page 20/36

Imbrication of elements

Ø Principles
A first line independent of 12 columns
A second line with 8 and 4 columns
In the block of 8 columns, a 3-row layout with 4 columns and 6 columns with an offset of 2.
th

In this block of 6 columns, a 4th row with 3 columns and an offset of 1, 5 columns and an offset.
th

of 1

Ø Test
[Link]

Bootstrap – page 21/36

Shift columns
[Link]

Ø Syntax
class="col-XX-push-*": shift to the right, from its "normal" position
class="col-XX-pull-*": shift to the left, from its "normal" position
It should be noted that the behavior is complex to analyze due to a shift from the position.
normal.

Ø Example: 06_shifted_grid.html

Principles
Column 1 is pushed to the right by 8 from 0 (from the edge)
Column 2 is pushed to the right by 3 from its 'normal' position which would be just after
column 1 if it had not been pushed: so, starting from 2: it starts at 5.
Column 3 is pushed to the left by 2 from its 'normal' position which would be just after
column 2 if column 1 and 2 had not been pushed: so from 4: it starts in 2

Ø Test
[Link]

Ø Code
<div class="row">
Column 1
Column 2
Column 3

Bootstrap – page 22/36

Classic layout

Classic layout

Principles
The header is a row on 12 columns. The same goes for the footer.
A row is defined that will contain the menu (nav) in 2 columns, and the section in 10.
columns.
In the section, a line is defined that contains the article over 10 columns, and div for the asides.
of 2 columns.
In the div of the asides, we place the aside, on 12 columns each.
For the footer, we choose not to put a line, but to place it over 12 columns.

Test
The provided text is a URL and does not contain translatable content.
[Link]

Code
row
<div class="col-lg-12">
Header
</div>
</header>

<div class="row">
<nav class="col-sm-2">
Menu
</nav>
<section class="col-sm-10">
Section
<div class="row">
<article class="col-sm-10">
Article

<div class="col-sm-2"><!--the asides-->

the asides
<aside class="col-sm-12">
Aside 1
</aside>
<aside class="col-sm-12">

Bootstrap – page 23/36

 Aside 2

translatedText
</section>

<footer class="col-lg-12">
Footer
</footer></footer>

Bootstrap – page 24/36

Version with multiple sections
Like the previous one but with 2 several sections.

Test
[Link]
[Link]

Bootstrap – page 25/36

Layout with hidden asides

Objectives

Ø Fixed and portable: lg and md

Ø Tablet: sm
Aside 3, 4 stacked

Ø Smartphone : sm
All stacked.
Besides 3,4 hidden

Tests
[Link]
[Link]

Bootstrap – page 26/36

Solutions

Ø Syntax
<div class="clearfix visible-sm-block"></div>

<div class="hidden-xs col-md-2" style="background:yellow">

Ø Definition of behavior according to window size

Rather than having a simple definition of columns by block such as:
<div class="col-lg-2">

We will define several behaviors according to the size of the window:

<div class="col-xs-4 col-sm-3 col-md-2">
With this definition, we have a display in 2 columns on fixed and portable (col-md-2), in 3
columns on tablet (col-sm-3) and on 4 columns on smartphone (col-xs-4).

Ø Solution
On a 3 "row": header, aside, section, footer
The row header and footer span 12 columns.

The row with the left aside (1,2), the section and the right aside (3,4) is divided into 3 blocks with their
column names.
The number of columns depends on the size of the screen.
<header class="row"><div class="col-md-12">

<div class="row">
!-- displays of aside 1,2 - section - aside 3,4
lg, md : sm2 - md8 - md2
sm : sm2 - sm10 - 12(stack)
xs: 12(stacked) - 12(stacked) - hidden(hidden)
-->

col-sm-2 aside

col-sm-10 col-md-8

<div class="hidden_xs col-md-2"> aside ...

<footer class="row"><div class="col-md-12">

Ø Computer: lg and md
Aside 1,2 on 2 columns, Section on 8 columns, Aside 3,4 on 2 columns.

Ø Tablet: sm
Aside 3, 4 stacked
As there is a 'float' between aside 1, 2, and section, aside 3 and 4 are positioned incorrectly and overlap the blocks.
aside1,2 and section.

Bootstrap – page 27/36

 We need to reset the floats with an empty div in class clearfix and visible-sm-block
visible-sm-block: only displays in tablet format
.clearfix:after { clear: both;}

Ø sm
To hide Aside 3,4:

Bootstrap – page 28/36

Dropdown menu

Objective: reduced menu to a button on smartphone

Ordinary menu format:

Ø Menu format smartphone:

Ø Unfolding

Example
[Link]
[Link]

Code

<html lang="en">
<head>
Bootstrap
<meta charset="utf-8">
<link
href="[Link]
[Link]" rel="stylesheet">
<link href="00_style.css" rel="stylesheet">
</head>

<body>
Navbar component, in the body, not in the container
<nav class="nvabar navbar-defautl">
The nav-header describes the menu bar
<div class="nav-header">
The navbar-toggle collapsed handles the menu that collapses into
smartphone
<button class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#monmenu">
MENU

Bootstrap – page 29/36

 </button>
<a href="#" class="navbar-brand">THE LOGO</a>

The ID is referenced in the button above

The given text does not contain any translatable content beyond HTML tags.
right
<ul class="nav navbar-nav">
<li><a href="#"> Presentation</a></li>
<li><a href="#"> The members</a></li>
<li><a href="#"> Contact</a></li>
<li><a href="#"> My account</a></li>

</nav>

<div class="container-fluid">
</div><!--container-->

<script
src="[Link]
<script
src="[Link]
.[Link]"></script>
</body>
</html>

Dropdown version

Menu format computer:

Ø Smartphone menu format:

Ø Unfolding

Bootstrap – page 30/36

Example
The provided text is a URL and does not contain any translatable content.
[Link]

Code

navbar component, in the body, not in the container

<nav class="navbar navbar-default">
The nav-header describes the menu bar
<div class="nav-header">
The collapsed navbar-toggle manages the menu to collapse in
smartphone
<button class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#monmenu">
MENU
</button>
<a href="#" class="navbar-brand">LELOGO</a>

The id is referenced in the button above

right

<form class="navbar-form navbar-left" action="">

<div class="form-group">
newsletter
<input class="btn-success" type="submit">
Receive
</div>
</form>
<ul class="nav navbar-nav">
<li><a href="#"> Presentation</a></li>
A dropdown for the sub-menu
<li class="dropdown">
<!-- dropdown-toggle for the collapsible menu. -->
span class caret for the small opening triangle -->
<a href="#" class="dropdown-toggle" data-
toggle="dropdown"> The members<span class="caret"> </a>
<ul class="dropdown-menu">
<li><a href="#"> Add</a></li>
Modify
<li><a href="#"> Delete</a></li>

<li><a href="#"> Contact</a></li>

<li><a href="#"> My account</a></li>
</ul>
</div>
</nav>

Bootstrap – page 31/36

Photo layout

Resolution problem

Principle
With small photos, you have to be careful that, when stacking them, they do not become
big... and blurry!

Vague example!
[Link]
[Link]

<div class="col-lg-2">
<img src="images/[Link]" alt="Mommy">

A photo is displayed in 2 columns.

There will be 6 photos in a row (6*2=12 columns).
But as soon as the window is less than 1200 pixels wide, the photos stack full width.
They may be blurry!

Solution

Ø Definition of behavior according to window size

Instead of having a simple definition of columns by block such as:
<div class="col-lg-2">

We will define several behaviors based on the size of the window:

<div class="col-xs-4 col-sm-3 col-md-2">
With this definition, we have a display in 2 columns on fixed and portable (col-md-2), on 3
columns on tablet (col-sm-3) and on 4 columns on smartphone (col-xs-4).

Ø The solution: control the number of photos displayed for each screen
[Link]

<div class="col-xs-4 col-sm-3 col-md-2">

<img src="images/[Link]" alt="Mommy">
</div>
We display a photo in 2 columns, so 6 photos per line for a laptop and a
fixed screen.
When using a smartphone, it displays in 4 columns, so 3 photos per row.
When using a tablet, we display in 3 columns, so 4 photos per row.

Bootstrap – page 32/36

Other examples

Photo pagination with JavaScript

[Link]
[Link]

Lists of all kinds

The provided text is a URL and does not contain any translatable content.

Advanced page example

The provided text is a URL and cannot be translated.

Bootstrap – page 33/36

Bootstrap Basic Components

Highlighting of the text

Jumbotron:[Link]
Badge and label:The provided text is a URL and does not contain translatable text.

List
[Link]

Table
[Link]

Form
The provided text is a URL and does not contain translatable content.
Form generator site (see HTML view):
[Link]

Image
[Link]

Button
The provided text is a URL and does not contain translatable text.
Button generator site:
[Link]
other site :
The provided text is a URL and contains no translatable content.

Icons
[Link]
Glyphicons site:
Invalid input for translation.
another icon site
[Link]

etc. !

Bootstrap – page 34/36

More complex Bootstrap components

Collapse
[Link]

Navigation bar
[Link]

Pagination
The provided text is a URL and does not contain any translatable content.
Example of pagination with Jquery and Javascript:

Ø Example: 11_pagination-[Link]

List and panel

[Link]
[Link]

Ø Example: 12_the_lists.html

Media
To place a photo or a video aligned to the right or left with text.
[Link]

Navigation
Navigation path: breadcrumb
[Link]

Carrousel
[Link]

etc. !

Bootstrap – page 35/36

Bootstrap Templates
Unable to access the content of the provided URL.
[Link]

Bootstrap – page 36/36