Bootstrap
Assignment |
||
10/4/17
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)
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:
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.
|
||