Bootstrap

Image

Bootstrap is a set of utilities needed to conceive the design of a Web page or App.

But more than anything, these tools are necessary for the controlled development of Responsive Design. The content of a page must indeed be able to display correctly and in a specific way, both in a Web browser or a smartphone.

Code Examples

We start with very simple codes. The more you progress, page after page, the more sophisticated the scripts will be.

C 0001 - Hello World !

Say hello...

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>We need to start from somewhere...</h1>
<p>Resize and see the changes.</p>
</div>  <div class="container">
<div class="row">
<div class="col-sm-4">
<h3>C1</h3>
<p>BHello World !</p>
<p>TXT1</p>
</div>
<div class="col-sm-4">
<h3>C2</h3>
<p>TIT2</p>
<p>TXT2</p>
</div>
<div class="col-sm-4">
<h3>C3</h3>
<p>TIT3</p>
<p>TXT3</p>
</div>
</div>
</div>
</body>
</html>

Reproduce this code, choosing one of the compilers below (♦ See DEF.) (don't copy-paste! It would be too easy). They have the same function, just pick up one according to your preferences.

When you copy your code, replace the existing code (by default) with your own.

Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !

C 0002 - Form

Create a form...

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Form</h2>
<form action="processing.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label><input type="password" class="form-control" id="pwd" placeholder="Enter you password" name="pwd"></div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label></div>
<button type="submit" class="btn btn-default">Soubmit</button>
</form>
</div>
</body>

Reproduce this code, choosing one of the compilers below (♦ See DEF.) (don't copy-paste! It would be too easy). They have the same function, just pick up one according to your preferences.

When you copy your code, replace the existing code (by default) with your own.

Warning ! For some of these compilers, you might have to choose the programming language yourself, in a specific menu which is offered to you. Of course, don't forget to click on RUN !

Info+

Creation
» Creation date: 2011
* Created by Mark Otto and Jacob Thornton
* Developed by Bootstrap Core Team

* Written in JavaScript, HTML, CSS and SASS
* Cross-platform
* MIT license

Practical cases

In order to train you, we add small programs every week to this section in order to keep you up to speed.

CASE 1

BASIC LEVEL

Create 3 pages with different editorial content

This little program will allow you to develop 3 pages, one devoted to an article, the second to a photo gallery and the third to a succession of videos.

TRY

CASE 2

INTERMEDIATE LEVEL

Develop a website with 2 different styles

This little kit will allow you to develop a small website, using two or even three different graphic styles for its Responsive Design.

TRY

CASE 3

EXPERT LEVEL

Preparing a series of small style libraries

Design and develop a complete library, gathering several styles families applicable to websites or Web App., depending on a dominant category.

TRY
2021 (C) Fond of Code tm (protected trademark) - Reflex001 / Diego Piccini (da Todi).
All rights reserved. Protected editorial content (www.theethicalweb.com).

About Us...

About Us...
Reflex001

Web
Programming
Development

Main Topics

Main Topics

Legal/Support

Legal/Support
Image