Web Design 3: Week # 8

Quiz time!

Please take Quiz # 6 on D2L!

Lynda

So, just like last time, I'll be providing notes for the content in the Lynda.com videos. I know the students for this quarter are online, so I figure videos help more than anything else. Please give me feedback so I know if this is a good/bad/whatever approach (always). Thanks!

Learning Time

Let's get started with Forms. Forms in HTML are pretty easy to create. You just need to create a form element, label elements, and input/select/textarea elements. Once those are created, be sure to give them ids and make sure that the inputs are connected to the labels via the "for" attribute (the "for" value of the label should match the "id" value of the input).

  • Adding basic styling to input fields can be done by adding the "form-control" class to them. This creates some nice styling, makes the width of the field 100%, and adds some padding to the field as well.
  • You can also create groups in the form (creating space between groups) using the "form-group" class on a div element. Simply enclose the form elements you want to group within the div and add the "form-group class to the div.

Forms

Learning Time

  • The "checkbox" class adds the appropriate styling to all checkbox type input elements, pushing the label to the right of the checkbox. 
  • You can also reuse the "btn" and "btn-default" classes that we learned in the last lecture to create the submit button. Also, the "pull-right" or "pull-left" that we learned in the last lecture can be used again to adjust the element to the right or left.
  • Another way to style and structure radio buttons is to have the label elements surrounding their respective input fields. This has the same effect as using the "for" attribute in the label and organizes the code in a similar way.
  • When styling radio buttons, you can use the class of "radio" on the div surrounding an input, but make sure the type of the input is also set to "radio".

Forms

Learning Time

  • Now, by default, you can select multiple radio buttons by default. If you only want a single choice available, simply give the radio buttons the same value in the name attribute. 
  • You can disable a radio element by using the "disabled" class.
  • If you want to make radio elements appear inline, you must remove any wrapper elements (like a div) surrounding the label and inputs and then add a class of "radio-inline" to the label surrounding the input.
  • If you want to create a horizontal form layout for screens that are wider than 768px, you can use class of "form-inline" on the form element. Note that the form will appear vertically stacked when the screen is 768 pixels or less.
  • If you want to hide a label or element in a form, you can add a class of "sr-only" to the element. This actually makes it only appear to those that are using a screen reader, meaning it's not visible but is still there. 

Forms

Learning Time

  • Now, let's say that you want a form that's going to be horizontal a screen, regardless of the viewport? This is especially true for smaller screens like mobile devices. For that, we can use the "horizontal" class on the form. Then, you'll be setting the size of the columns using what we learned in the first bootstrap lecture. That is, by using the "col" classes on the label and div elements in your form. Remember that each row needs to add up to 12 columns. 

Validation Styles

  • Form validation is a topic covered in Dynamic Web 1 when working with programming validation. However, the visual side of it can be done easily using Bootstrap. For example, if you wanted to show that a user had a warning, error, or success in their field, you can simply add the class of "has-success" to the div surrounding the fields. Then, you can use icons (called glyphicons in Bootstrap) to the field by just adding the right classes to the field where you want the icon. For example, adding a class of "glyphicon" and a class of "glyphicon-ok" will add a checkmark to the field. Again, doing the actual validation is done programmatically, but the visuals can easily be done through PHP. 

Horizontal Form

Learning Time

  • Input groups allow you to have add-ons to your input fields. For example, you can have a checkbox, dollar sign, button, or whatever attached to your input field. Adding an input group is fairly easy.

    Just create a div, add a class of "input-group" to the div, and wrap the div around the input field you want to add add-ons to. Also, be sure to remove any labels from the input field.

    Next, add add-ons to the input field either before or after the field using span elements. Give the span element or elements a class of "input-group-addon". If the span is nested on top of the input element, the span will appear as an add-on to the left of the input field. If the span is nested below the input element, the span will appear as an add-on to the right of the input field.

    You can either add text within the span tags (like a dollar sign or decimals) or another element. For example, if you wanted to add a checkbox to the the input field, you could just put an input field with a type of "checkbox" within the span tags.

Input Groups

Learning Time

  • The fieldset tag is used in HTML to group elements together. We've used the "form-group" class on elements for grouping things together so far, but that's only in Bootstrap. When using fieldset, we have the ability to group elements together and then also disable all elements within the fieldset tags by adding an attribute of "disabled" (no value) to the fieldset element. 
  • You can also make fields become "read only" (no input can be placed inside), by setting the name attribute and value attribute of the field and then adding an attribute of "readonly"
  • Adding text to the form and having the text align within the form is also pretty easy. Simply add a div, give it a class with a "col" value, add a p, header, or other text element within the div, and then give the text element a class of "form-control-static"
  • Changing the size of the fields is also pretty easy. Add a class of "input-sm" or "input-lg" to the input fields to create a small or large fields. This can also be done with the labels by adding the class of "form-group-sm" or "form-group-lg" to the container element (usually a div).

Using Miscellaneous Styles and Sizing

Learning Time

  • Bootstrap also comes with a ton of icons called "glyphicons". We mentioned these earlier in this lecture, but now let's dive a bit deeper. 
  • Glyphicons come from glyphicons.com. You can get the class for them by clicking on any one of the icons in the site and getting the name. The only difference between the site and Bootstrap is that the class on the site starts with "halfling", whereas in bootstrap they're called "glyphicon".
  • Adding the glyphicon to an element is as simple as adding the class of the icon to the element. For example, you can add the "print" icon to an element by adding the classes: "glyphicon" and "glyphicon-print" to the element.
  • Generally, the element used to put glyphicons onto a page is the "span" tag, which shouldn't have any text within the tags, and the "aria-hidden" attribute is true (for screen readers to ignore it). If you add text to the element, it will appear packaged with the icon. This might be something you want to do, so play around with it and see the effects.

Using Icons

Learning Time

  • To create a dropdown menu in Bootstrap, create a div element and give it the class of "dropdown". 
  • Create a button element, give the element a "type" of "button" and a "data-toggle" or "dropdown". Give this same button the following classes: "btn btn-info dropdown-toggle"
  • You can create a simple down arrow for the drop down menu using a span with the class of "caret"  within the button.
  • Then, create a ul element with li elements, each li element containing text about the item. Be sure to add a class of "dropdown-menu" to the ul element as well.
  • You can also add the relevant screen reader attributes using the aria attributes.
  • If you want a header for your dropdown items, you can create a li element with a class of "dropdown-header"
  • If you want to separate sections in the dropdown, simply add another li element and give it a class of "divider" and a "role" of "separator"
  • You can give the caret some more styling by wrapping it within its own button, essentially creating 2 buttons. 

Navigation Components
Creating a Dropdown

Learning Time

  • Bootstrap allows you to group buttons together by wrapping the buttons together in a div and give it a class of "btn-group". Be sure to set the role attribute to "group" for screen readers. You can also have the buttons be aligned and justified by having the parent container have a class of "btn-group" and "btn-group-justified" and then wrap each child button in a div with a class of "btn-group" as well. 

Navigation Components
Button Groups

Navigation Menus

  • To create a navigation menu in Bootstrap, create an unordered list and add some li elements to the ul element. To make the navigation menu look like tabs, add another class of "nav-tabs" to the ul element.
  • Giving a class of "active" to any of the li elements within the ul element that has a class of "nav" will make that element highlighted. 
  • For a more rounded look to the nav tabs, you can change the "nav-tabs" class to "nav-pills".
  • For a stacked look, add the class of "nav-stacked"
  • For an evenly spaced set of navigation tabs, use the class of "nav-justified"
  • Instead of using the "nav" class, you can create a more traditional nav bar by using the class of "navbar-nav to your ul element.
    • To have additional styling, you can add a nav element surrounding the ul element. This element can be given a class of "navbar" and then additional classes for positioning and style. For example, "navbar-default" will give the nav element a default style while the "navbar-fixed-bottom" will position this navbar at the bottom of the page. This can be very handy, as it can be tricky to do this with CSS alone.
    • See next page for more options

Learning Time

  • For a fixed nav-bar that scrolls with the page, you can use the "navbar-fixed-top" or "navbar-fixed-bottom" class on your nav element.
  • If you want to modify the styles of your nav menu, simply change the styles in your css stylesheet and target the appropriate classes. Check what styles exist on the existing elements by using the inspect element on Chrome.

Navigation Components
Button Groups

Add Content to the Navbar

  • In order to create a brand for your project, you can create a div within your nav element and give it a class of "navbar-header". Then, place an anchor tag within the div and give it a class of "navbar-brand". This brand is essentially going to be the name of your site or your product. It will appear in a specialized style format before the other elements in your navigation, so be sure to place it at the top in your nav element. 
  • If adding a button within your navigation menu, add a button with the proper button classes. Then, add a class of "navbar-btn" to the button element. This will align the button with your nav menu.

Learning Time

  • In order to have a nav menu that turns into a hamburger menu when the viewport reaches a certain, smaller size (768px, for instance), give the navigation menu div an id of "collapsemenu". Then, go to your navbar-header div and create a button of type button with the classes "navbar-toggle" and "collapsed". Also, be sure to have a data-target attribute of "#collapsemenu", since this will target the collapse menu.
    • To create the icon menu, add 3 different span elements and give them each a class of "icon-bar". Have these elements below your button.

Navigation Components
Collapsing your navigation

Using breadcrumbs and pagination styles

  • Breadcrumbs allow you to see where you are in a particular page. For instance, if you were on home/services/grooming, the breadcrumb shows you that you started in home, then you went into services, and now you're in grooming. To add breadcrumbs to a list, just give the ol or ul element of the list a class of "breadcrumb".
  • For next and previous styles, create a nav element and place a ul list within it. Then, add a class of "pager" to the ul element. 
    • Add a class of previous to the element you want to represent the previous tab and a class of "next" to the other li element. You can add a left arrow using the ASCII element of "←" and a right arrow using "&rarr"

Learning Time

Using breadcrumbs and pagination styles

  • Finally, you can create a pagination menu with numbered pages by creating a nav element, adding an ol element to it, and placing li elements within the list. 
  • Give the ol element a class of "pagination".

Discussion

  • Don't forget to answer the discussion question for the week!

    "How has bootstrap helped with creating navigation menus? Is it easier or harder than building it from scratch?"

Project Update 8

  • Once you're done with the reading and the lecture, I'd like you to continue working on your web application.
  • This week, your project requirements will be:
  • 1) Use Bootstrap styles to create responsive navigation. Pinned navigation after user scrolls window. Links animate the scroll of the window. And when the user is in mobile view, the menu tucks away into a hamburger menu.
  • 2) Add 3 examples of Bootstrap Glyphicons
  • Remember, the assignment for each week will result in a completed project. The next 3 weeks will be based on completing a final project, so see the project guidelines to see what the minimum requirements will be for your projects.
Made with Slides.com