Frontend Web Development
Assignment for Week 13
- Create a new HTML file (follow the instructions in Assignment 1 if needed, up to the step where you create the
<title>
) element.
- Add a
<script>
element pointing to a CDN-hosted jQuery file.
-
Go to the Bootstrap site and customize a version that includes these components:
- Buttons
- Icons
- Modals
- Close icon
- Utilities
and the Modals jQuery plugin.
- Download, extract, and place the Bootstrap folder into the same folder as the HTML file.
- Add
<link>
and <script>
elements pointing to the Bootstrap CSS and JS files, respectively.
- Create a JS file of your own and include a
<script>
reference to it in the HTML file.
- Add a
<div>
with a class
of "modal hide
". Put some text inside it.
- Add a
<button>
element with some text in it.
-
Add behavior that makes clicking the
button
cause a the <div>
to appear. jQuery functions you should use:
Since these are <button>
elements and not <input type="submit">
, you don't need to return false
at the end of your click
callback, as button
s do nothing by default.
Extra credit:
- Add a
<button>
inside the <div>
, with the text "Close
".
- Add behavior that makes clicking that
<button>
close the <div>
.
-
Customize Bootstrap further to include, as well as the components above:
- Nav, tabs, and pills
- Button groups and dropdowns
- Dropdowns
and the Dropdowns jQuery plugin.
- Create an unordered list with anchors and sublists (
<a>
and <ul>
elements inside each <li>
).
- Give the main
<ul>
a class
of "nav
".
- Give each
<li>
child of the main <ul>
a class
of "dropdown
".
- Give each
<a>
a class
of "dropdown-toggle
".
- Give each
<ul>
inside each <li>
a class
of "dropdown-menu
".
-
Add behavior that makes clicking the
dropdown-toggle
elements cause the dropdowns to appear. jQuery functions to use:
Solution