Beginner
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
→ Let's start with very simple codes. The more you progress, page after page, the more sophisticated the scripts will be. However, you must go over 30 to 40 pages per level, before moving on to the next step...
→ In order to evaluate your codes, click on the icon on the left at the bottom of the page (gears), then choose a compiler from the list that will be open in another tab. Finally, test your work.
NOW REPRODUCE AND IMMERSE YOURSELF!
C 0001 - Hello World !
Reproduce this code (please do not copy-paste!).
<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>
C 0002 - Form
Reproduce this code (please do not copy-paste!).
<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">Submit</button>
</form>
</div>
</body>
CHOOSE YOUR COMPILER
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 !
Bootstrap Technical Specifications
Info+ (Bootstrap)
Creation
» Creation date : 2002
* Created and developed by Microsoft
* Influenced by all languages specific to .NET
* Multiplatform
* Proprietary license / Apache (V5) but also open source
* Created and developed by Microsoft
* Influenced by all languages specific to .NET
* Multiplatform
* Proprietary license / Apache (V5) but also open source
Official/Leader Websites
Tutorial Websites
Complementary Websites
Edition & Press Review
Tools+ (Bootstrap)
Softwares & Frameworks
Glossary
Practical Cases
In order to train you, we add small programs every week to this section to keep you up to speed.
CASE 1
BASIC LEVEL
Display a list of links
This small program will allow you to develop a small glossary, made up of links leading to second level pages.
CASE 2
ADVANCED 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.
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.
News
- BOOTSTRAP / Exercices
- Hits: 369
