I actually like the look of plain, unstyled HTML.
But to many modern eyes, unstyled HTML looks like poo-with-serifs. Or we think the style sheet didn't load. For comparison, you can look at this page without Bootstrap.
So let's add Bootstrap, which is the easiest thing we can to make it look a bit better.
In its simplest form, Bootstrap is just a .css file. It was originally developed at Twitter. You link to it like any
other .css file. You can host a copy on your own web server. Or you can link to a copy on giant, powerful, reliable servers
that other people manage for us.
Like any other style sheet, it applies some styles to standard HTML tags. And it applies others to the tags you mark with
specific classes, i.e. <tag class="classname" >.
If the Bootstrap css file is not available, your HTML displays according to your browser's defaults. Nothing breaks. People can still read your page.
This isn't a complete Bootstrap tutorial. Instead I will concentrate on the smallest changes that have the biggest pay-off.
First, here's a template for an HTML5 page that pulls bootstrap from a public Content Delivery Network, and adds one META tag and one DIV to make it all work.
This gives us a number of improvements, including nicer fonts, automatic styling of <code>, <pre> and <blockquote> tags, and more nice styling if you use a <footer> tag in your blockquote.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>
This page uses Bootstrap's default fonts. The code above is in plain old <pre> tags. And here's an example of a blockquote with a <footer> element inside:
A blockquoted quote about blockquote: The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.
Bootstrap also adds a cool effect when you use the <kbd> tag to tell people which k e y s to press.
We add other Bootstrap effects by adding pre-defined Bootstrap classes to our HTML elements. To tell Bootstrap to style
a table, we add class="table" to a table tag. And that makes our table look like this:
| Firstname | Lastname | Title |
|---|---|---|
| Isaac | Asimov | Caves of Steel |
| Larry | Niven | Ringworld |
| Robert | Heinlein | Stranger in a Strange Land |
| William | Gibson | Neuromancer |
Two other nice effects are horizontal striping, and automatic highlighting of a row when your mouse hovers over it.
These are added with two more Bootstrap classes, "table-striped" and "table-hover". So the table tag for the table below looks like:
<table class="table table-striped table-hover">
| Firstname | Lastname | Title |
|---|---|---|
| Isaac | Asimov | Caves of Steel |
| Larry | Niven | Ringworld |
| Robert | Heinlein | Stranger in a Strange Land |
| William | Gibson | Neuromancer |
Sometimes you just want a list, without indentation or numbers or bullets. With Bootstrap, you can just add class="list-unstyled" to your <ol> or <ul> tag, and you get nothing but a simple, vertical, list:
Adding the well class to a div puts all of the div's content in a "well", which sets it off from the rest of the page.
A paragraph of text a well.
And a final paragraph
<code>, <pre>, <blockquote>, and <kbd>.class="table table-striped table-hover"class="list-unstyled".class="well".