Follow the textbook (link to the ebook/print+ ebook) to set up a Bootstrap starter page with a green button that looks like this:
See pages 75-77 to set up the button. Best is to use a <button> element.
Also read the Preface, Chapter 1 (Up Close and Personal) and Chapter 2 (Grid System). Then you'll know that you need (see p. 14)
- an HTML5 doctype
- viewport, charset and http-equiv <meta> tags
- JavaScript shivs for IE 8 or below added using conditional comments; use the links on p.14 or the code here:
-
<!-- conditional comments for old IE 8 and below --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
- a link to or copy of the Bootstrap CSS (check full version, but use the minified p. 11)
- a link to or copy of the Bootstrap CSS optional theme
- a link to or copy of the Bootstrap JavaScript (again, can be minified)
- a link to or copy of jQuery
Start at the official site ( this links to the 3.3. version, not the Beta 4.0). Download Bootstrap so that you have folders with the CSS, fonts (glyphicons) and JavaScript. Take a look at the non-minified CSS—you should understand a lot of it. We are going to link to the main files, not the local copies—these are just so hat you can see what files are involved.
On the official site, go to Getting Started and get the links from MaxCDN (now StackPath) content delivery network for the CSS, optional themes, and JavaScript. Get the jQuery from Google. Note that (p. 11) Rahman suggests older versions of jQuery (1.1) for old IE, but you can go ahead and use the latest (2.1.x). Keep the Boostrap JavaScript link just before the </body> as on p. 15, but put the jQuery link in the <head> element.
For the jQuery test, add a <script> element inside a <div class="test"> below your name. Call jQuery with the ready function:
$( document ).ready(function() {// Your code here.});
For Your code here, use jQuery innerHTML manipulation to add text .text() to the <div class="test>. Here's how to select the class. So the line below your name will be generated by jQuery, not HTML.
Post the file online and send me the URL by Wednesday, Oct. 18. If you want to add any CSS (padding:?) add a <style> element to the header, or <link> to your CSS. Don't touch the Bootstrap CSS.
