-
Open
landing_start.htmlin Chrome and Sublime. Openlanding_target.htmlin Chrome. -
In
landing_start, remove the<link>tomy_landing_styles.css. We've now wiped out all of the hard work we did last time. Refresh in Chrome to see what we're left with. -
Now, let's connect the document to
bootstrap.css, which I have already downloaded into a subfolder calledassets/css. Add this line to the<head>:<link rel="stylesheet" type="text/css" href="proxy.php?url=https%3A%2F%2FgitHub.com%2Fassets%2Fcss%2Fbootstrap.css"> -
Try to modify the starting point until it looks like the target:
- Replace the
<table></table>element we hijacked for layout with a<div class="container"></div>element. - Wherever we had
<tr></tr>elements, replace them with<div class="row"></div>elements. - Wherever we had
<td></td>elements, replace them with<div class="col-md-X"></div>elements whereXis a number between 1 and 12 (however many columns you want that cell to span across). - Now that we're done positioning, let's do some styling:
-
Open
roster_start.htmlin Chrome and Sublime. Openroster_target.htmlin Chrome. -
In
roster_start, delete everything inside the<head>tag except for the<title>. We've now wiped out all of the hard work we did last time. Refresh in Chrome to see what we're left with. -
Now, let's connect the document to
bootstrap.css, which I have already downloaded into a subfolder calledassets/css. Add this line to the<head>:<link rel="stylesheet" type="text/css" href="proxy.php?url=https%3A%2F%2FgitHub.com%2Fassets%2Fcss%2Fbootstrap.css"> -
Try to modify the starting point until it looks like the target:
- Replace the
<table></table>element we hijacked for layout with<div class="container"></div>element. - Wherever we had
<tr></tr>elements, replace them with<div class="row"></div>elements. - Wherever we had
<td></td>elements, replace them with<div class="col-md-X"></div>elements whereXis a number between 1 and 12 (however many columns you want that cell to span across). - Now that we're done positioning, let's do some styling:
- list-unstyled class
- img-rounded class (instead of our old
"avatar-image"class) - Panel component (instead of our old
"card"class) - Page header component
- Open
canvas_positioning_start.htmlin Chrome and Sublime. Opencanvas_positioning_target.htmlin Chrome. - Use Shoelace.io to plan out your layout. Copy the skeleton code into your document from Shoelace.
- Move the content up into the right spots in the skeleton.
- Apply styles as needed.
Bootstrap gives us a great foundation, but we usually have to write some of our own custom styles, too. We can link our own custom stylesheet below the link to Bootstrap and customized/override whatever we wish.
Read through details.html, index.html, and new.html and try to make sense of them. Open them in Chrome and play with them. Write down any questions you have about anything at all in them.
This is all you need to know for now.