MODAL DIALOGS

March 3, 2017March 3, 2017 ~ micaktvrtko ~ Leave a comment

MODAL DIALOGS

Modal dialogs are the ultimate way to get the user’s attention, as the user can’t interact with the rest of the page without first closing the modal dialog. Modal dialogs can contain whatever HTML you need to present, including status messages, videos, or forms.

JAVASCRIPT AND BOOTSTRAP

In response to several questions I’ve seen in the discussion forums, I wanted to spend a little time talking about jQuery/JavaScript and Bootstrap. Now, if you’re not familiar with JavaScript don’t worry about this section. It is, as the title implies, bonus content.

One thing that you’ve probably noticed is Bootstrap does a lot of work for you, allowing you to avoid writing JavaScript in many cases. However, there is an API that is available you can use for certain operations, such as closing a modal dialog box. But even for actions that don’t have Bootstrap API calls, such as toggling validation, you’ll notice that you can accomplish the desired result by simply adding and removing the appropriate classes, which jQuery makes very simple.

<!DOCTYPE html>

<html>

<head>

<title>Confirm !</title>

</head>

<body>

BOOTSTRAP FORMS, BUTTONS, VALIDATION

March 3, 2017March 3, 2017 ~ micaktvrtko ~ Leave a comment

Bootstrap offers great support for collecting information from users, as well as providing feedback. As with everything else in Bootstrap, you create forms by adding the appropriate classes and HTML structure to your pages.

CREATING HORIZONTAL FORMS

By default, forms in Bootstrap are displayed vertically, meaning that the prompt for an input control, such as a textbox, is placed above the input control. Quite frequently, you want the prompt next to the input control. In order to do this, a little bit of structure is required for the form, and a couple of classes need to be added.

Creating the form element

In order for a form to use horizontal display, the form-horizontal class must be added to the form element.

<formclass=”form-horizontal”>
<!– form content here –>
</form>

Creating the rows for the form content

Horizontal forms use the same grid system we’ve already covered. However, you won’t create normal rows like you did in the past. Instead, you will create form groups. Form groups tell Bootstrap that the controls inside of that section are, as the name implies, a group of controls for the form. In addition, the form-group class also creates a row, so you do not need to add in the row class.

Adding the label

Adding labels to forms is a best practice. By adding a label, you’ve made your form more accessible for screen readers, as well as to touch displays, as clicking on the label will place the form on the associated control. The label element supports sizing by just adding the appropriate col-*-* class to the element. In order for the label to be recognized by Bootstrap as a form label, the control-label class must also be added.

<labelfor=”address” class=”control-label col-md-3″>Address:</label>

Adding the input control

The last item to add is the input control. In order for it to be recognized by Bootstrap, it must be decorated with the form-control class; if you forget that class the formatting won’t be correct. In addition, the form control itself cannot be sized by using col-*-*; in order to size the form control, you place it inside of a div tag decorated with the appropriate sizing class.

FULL HTML AND SCREENSHOT

<formclass=”form-horizontal”>
Address:

</div>

</form>

ENHANCING CONTROLS

HTML5 offers several improvements over the classic HTML controls, including the ability to add placeholders, and support for new data-types, such as email addresses. However, you’ll notice that textboxes still look like textboxes. Bootstrap offers the ability to enhance textboxes, providing more inline support and guidance as to the type of data you expect from a user.

ADDING GLYPHICONS TO FORM CONTROLS

By adding a glyphicon to a form control, you can provide additional context to the user. Bootstrap provides a host of glyphicons, and makes it straight forward to add them to a form control.

Creating the input group

In order to add a glyphicon to a form control, you need to create an input group. The input group will contain the components Bootstrap will use to construct the UI.

Creating the input group addon

Whatever content will be added on to the control must be added as an input group addon, which is accomplished by creating a container with the input-group-addon class.

Adding the glyphicon

Inside of the input group addon container, place whatever item it is you wish to be added to the control, such as a dollar sign, an at sign, or a glyphicon.

<spanclass=”glyphicon glyphicon-user”></span>

FULL HTML AND SCREENSHOT

<formclass=”form-horizontal”>
Username:
<input type=”text” class=”form-control” name=”username” id=”username” />
</div>
</div>
</div>
</form>

BUTTONS

Buttons are a part of the user interface that a user can click on. However, buttons don’t necessarily need be actual HTML buttons. The advantage to making another control, such as a hyperlink, appear as a button is it becomes clearer to the user that they are able to click on that item. Bootstrap offers the ability to make most HTML controls that someone would click on, including both hyperlinks and buttons, appear as buttons.

CREATING BUTTONS

To create a button interface, you decorate the component with the appropriate classes. The first class tells Bootstrap the control should display as a button, and the second will be the modifier, indicating the color scheme to use.

Adding a button

To add a button, decorate the item in question, such as a hyperlink or button, with the btn class, and the appropriate modifier.

<buttontype=”submit” class=”btn btn-default col-md-offset-3 col-md-4″>Submit form</button>

BUTTON GROUPS

Button groups allow you to make radio buttons or checkboxes have the same UI as buttons. The advantage to doing this, besides the fact that it just looks better, it is also more touch friendly than the default radio buttons or checkboxes.

Creating the group

The first step to converting radio buttons or checkboxes to look like buttons is to add the button group. The button group must also have the data-toggle=”buttons” attribute set.

</div>

Adding radio button (or checkbox)

The second step is to add in the radio button or checkbox. The radio button or checkbox will be surrounded by a label. The label will provide the button interface.

<labelclass=”btn btn-primary”>
<input type=”radio” id=”first” name=”sample” />
First
</label>

DEFAULT BUTTON COLORS

The color of the button changes based on the modifier. All button modifiers have a prefix of btn-

Modifier	Default color
Default	White
Primary	Dark blue
Success	Green
Info	Light blue
Warning	Yellow
Danger	Red

FULL HTML AND SCREENSHOT

<formclass=”form-horizontal”>
First
Second
</div>
Submit form
</form>

VALIDATION

If there’s anything consistent about dealing with user input, it’s that at some point someone is going to submit data that’s incorrect. This might be because of an incorrect data type, a typo, or potentially something malicious. Regardless of the reason, you want to provide the user with feedback as to their mistake.

Bootstrap offers several potential ways to do this, including inline validation. The advantage to inline validation is the user sees their error message in the same location as the error itself.

ENABLING INLINE VALIDATION

In order to enable inline validation, a couple of classes and items need to be added to the HTML.

Add validation state to the form-group

To use Bootstrap to set the color for the current validation state, add one of three classes to the form-group container:

has-success (green)
has-warning (yellow)
has-error (red)

Add icon to the textbox

To add a glyphicon to the textbox to indicate status, first update the form-group container to include the has-feedback attribute.

Then, after the textbox, or input-group, add a span element for the glyphicon. Ensure that the span element is decorated with the form-control-feedback class.

<spanclass=”glyphicon glyphicon-remove form-control-feedback”></span>

FULL HTML AND SCREENSHOT

<formclass=”form-horizontal”>
Address:
</div>
<!– Input group –>
Username:
<input type=”text” class=”form-control” name=”username” id=”username” />
</div>
<!– Glyphicon is placed after input group–>
<span class=”glyphicon glyphicon-remove form-control-feedback”></span>
</div>
</div>
</form>

ALERTS

In addition to providing inline feedback on the controls themselves, you sometimes need to do a little more to get the user’s attention. This might be a generic error message letting the user know they need to fix a couple of items, or it might be to let them know about the status of a background call that was made on behalf of the user, such as an Ajax call. This is where alerts come into play.

Alerts are colorized sections of a page designed to get the user’s attention. You can create an alert by creating a container with the correct Bootstrap classes. Keep in mind that alerts are not dynamic, but you can make them dynamic very easily by toggling the visible/hidden classes.

CREATING ALERTS

To create an alert, you need to add in a container with the appropriate Bootstrap classes, and then configure it as needed.

Alert container

The alert container is a standard div element, with the alert class added.

Modifiers

You can also add in the appropriate color modifier. Keep in mind that the modifiers only impact the color and have no other impact on the page.

Modifier	Default color
alert-success	Green
alert-info	Light blue
alert-warning	Yellow
alert-danger	Red

Dismissible alerts

To make an alert dismissible, or closable, add the alert-dismissible class to the container, and add a button to allow the user to dismiss the alert. The button needs to be configured with the data-dismiss=’alert’ attribute.

Alert content

Alerts can contain whatever content you need to let the user know the current status. This can include header elements or other HTML.

FULL HTML

×
Warning
It appears that something has gone wrong
</div>
</div>

SCROLLSPY, ACCORDION, CAROUSEL

March 3, 2017 ~ micaktvrtko ~ Leave a comment

SCROLLSPY

Scrollspy is a data display that allows a user to jump directly to the data they wish to see, but also enables scrolling. Like tabs, scrollspy provides navigation tabs. But unlike tabs, scrollspy allows a user to scroll through content as well.

SCROLLSPY SAMPLE

Navigation

The first step to adding scrollspy to your page is to add a nav element. The nav element needs the classes navbar (to mark it as a navbar), navbar-default (to enable the color scheme), and navbar-static (to allow it to scroll with the page). In addition, you will want to add the role=’navigation’ attribute for accessibility.

In addition, you will need to give the nav element an ID. When scrolling through content, the tab that represents the data that is currently being viewed should be active; Bootstrap handles this by requiring you to point the container for the data back to the navigation.

<navclass=”navbar navbar-default navbar-static” role=”navigation” id=”navbar-spy”>
<!– links –>
</nav>

Inside of the nav element, you’ll add an unordered list. The ul element needs to have both nav and navbar-nav classes added to it. Inside of there you will add the links that will act as the navigation links to the scrollspy content. Each link will point to the ID of the content’s container, again making sure to use CSS selector syntax. The link for the first data to be displayed should have the active class added.

<ulclass=”nav navbar-nav”>
<li class=”active”><a href=”#scroll-first”>First</a></li>
<li><a href=”#scroll-second”>Second</a></li>
</ul>

Content

The content that the user will navigate through using scrollspy needs to be inside of a container decorated with data-spy=’scroll’, and its data-target attribute set to the ID set on the nav element (again using CSS selector syntax). If you want to use scrollspy for the navigation of the entire page, say for a frequently asked questions (FAQ) page, you can use those attributes on the body element. Finally, the style of the containing element needs to have position:relative in order to ensure the tabs highlight correctly as the user scrolls.

In the example below, I use a div as the container, with the height sent to a small value, to reduce the vertical space for my demo, and then overflow-y set to scroll to enable scrolling.

Each block of content needs to be inside of a container with an ID. The ID will be referenced by the links in the nav element.

HTML and screenshot

<h2>Scrollspy</h2>
- First
- Second
</div>
</div>

ACCORDION

The accordion display is similar to tabs, in that a user can only see one piece of data at any given time. However, unlike tabs, the display is vertical, and each pane is a collapsible region.

ACCORDION SYNTAX

Accordion container

The accordion is built using the panel capabilities of Bootstrap. The container will be decorated with the panel-group class. It will also need an ID to represent the accordion container.

Panel header

Each collapsible section will be a panel inside of the panel group. Each panel will be decorated with the paneland panel-default (for color) classes.

Each panel will need a heading and a section for the content. The heading is created by adding a container, decorated with the panel-heading class, followed by a container for the title, typically a header element, with the panel-title class.

Finally, the header needs a link to enable the collapsing for the panel. The link needs to be decorated with data-toggle=’collapse’. It also needs to have data-parent set to the ID of the panel container you created earlier. And finally the href attribute needs to be set to the of the content panel, which you’ll create shortly, again using the CSS selector syntax.

<adata-toggle=”collapse” data-parent=”#accordion-sample” href=”#accordion-sample-one”>
<!– heading text –>
</div>

Panel content

Panel content needs two containers. The outer container will have the ID that will be referenced by the link, and two classes – panel-collapse and collapse. In addition, the first panel to be open needs to have the in class.

Inside of that container, you will create one more, with a class of panel-body.

HTML AND SCREENSHOT

Heading One

Sample content
</div>
</div>

Heading Two

Sample content
</div>
</div>
</div>

CAROUSEL

A carousel is a paging data display. It’s ideal for looping through a group of photos, or potentially advertisements.

CAROUSEL SYNTAX

The carousel control is really four parts. The first part is the container for the carousel. Inside of the container, you will create the set of indicators for the current slide, the container for all of the slides, and the navigation to allow the user to change slides.

Container

The container is a div element, with the carousel and slide classes, and the data-ride=’carousel’ attribute. In addition, the container will need an ID that will be used by the carousel indicators.

Indicators

The indicators are inside of an unordered list container with the carousel-indicators class. Each indicator is a list item, with two attributes. The first is data-target, which points to the ID of the carousel’s container, again using CSS selector syntax. The second is data-slide-to, which indicates the zero-based position to move the carousel to if the user clicked on that icon. Finally, the first image to display is flagged with the active class.

<olclass=”carousel-indicators”>
<li data-target=”#carousel-demo” data-slide-to=”0″ class=”active”></li>
<li data-target=”#carousel-demo” data-slide-to=”1″></li>
</ol>

Slides

The slides are contained inside of a container with the carousel-inner class.

Each individual slide will be inside of a container with an item class. Each slide can have whatever content you wish, typically images. In addition, you can add captions to the image, by adding a container with a carousel-caption class. Finally, the first slide to display should have the active class.

Caption Heading One
Caption Text One
</div>

Navigation

Navigation is provided by adding links to the bottom of the carousel’s container. Each link is decorated with carousel-control, and the href points to the ID of the carousel, again by using CSS selector syntax. The data-slide attribute indicates if clicking the button goes forwards (next) or backwards (prev). For the UI of the link, you can use glyphicons. To add a glyphicon in Bootstrap, simply create a span element, add both the glyphicon class, and the class of the glyphicon you wish to display.

<aclass=”left carousel-control” href=”#carousel-demo” data-slide=”prev”>
<span class=”glyphicon glyphicon-chevron-left”></span>
</a>
<aclass=”right carousel-control” href=”#carousel-demo” data-slide=”next”>
<span class=”glyphicon glyphicon-chevron-right”></span>
</a>

HTML AND SCREENSHOT

Caption Heading One
Caption Text One
</div>
Caption Heading Two
Caption Text Two
</div>
</div>
<a class=”left carousel-control” href=”#carousel-demo” data-slide=”prev”>
<span class=”glyphicon glyphicon-chevron-left”></span>
</a>
<a class=”right carousel-control” href=”#carousel-demo” data-slide=”next”>
<span class=”glyphicon glyphicon-chevron-right”></span>
</a>
</div>

TABS

March 3, 2017March 3, 2017 ~ micaktvrtko ~ Leave a comment

Tabs allow you to display data in different pages, each one with a tab title on top of it. Tabs are perfect for scenarios when you have a lot of data to display, but the user only needs it in smaller chunks, displayed one at a time. One key thing to remember about using tabs is they are restricting the user’s ability to scroll.

TABS SYNTAX

Tabs

In order to create the tabs section, you need to create an unordered list of links, similar to a list of links displayed in navbar. You need to decorate the ul element with the nav and nav-tabs classes, and set the roleas tablist.

<ulclass=”nav nav-tabs” role=”tablist”>
<!– tab links –>
</ul>

The links need role=’tab’ and data-toggle=’tab’ set on them. In additon, the href attribute needs to be set to the ID of the container of the content you wish to display on that tab. For example, if the div that contains the data to display has an ID of Demo, you need to set the href of the link to be #Demo. Note again that when you target content for Bootstrap, you need to use the CSS selector syntax. In addition, you add active to the first one.

<liclass=”active”><a href=”#tabs-first” role=”tab” data-toggle=”tab”>First</a></li>
<li><ahref=”#tabs-second” role=”tab” data-toggle=”tab”>Second</a></li>

Tab content

The tab content is placed below the tabs, and inside of a containing div element with the tab-content class.

Each pane, or block of content to display under a tab, is also placed inside of containing div elements. Each container needs to be decorated with the tab-pane class. In addition, you add active to the first one to be displayed. Optionally, you can add the attribute fade to each pane to enable animation, and fade in to the first tab to be displayed to ensure it’s shown to the user.

HTML AND SCREENSHOT

Tabs
First
Second
First
Second
</div>
</div>

BOOTSTRAP MOBILE NAVIGATION

March 3, 2017 ~ micaktvrtko ~ Leave a comment

The navbar is designed to list links horizontally on your page. The challenge is on mobile devices you have limited horizontal space. To get around this, Bootstrap uses a dropdown menu for smaller devices, with the toggle button typically being represented as three lines, or “hamburger”.

Configuring the hamburger

To add support for the hamburger, you need to add the components that will make it up. Inside of the navbar-header, add a button configured as below.

<buttontype=”button” class=”navbar-toggle collapsed” data-toggle=”collapse”>
<!– placeholder –>
</button>

The two classes configure the button as the toggle for the dropdown list, and collapsed by default, respectively. The data-toggle attribute targets the collapse state, meaning when you click, or tap, on it the first time it will open, and close on the second click.

Inside the button you will add the display. The first part of the display is designed for accessibility. By using the sr-only attribute, you are adding text that will not be displayed, but only read to screen readers. Then you will add in the lines that will make up the hamburger, with each line being identified with the icon-bar class.

<buttontype=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#hamburger-navigation”>
<span class=”sr-only”>Navigation toggle</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>

Adding links to the mobile dropdown

To add your existing navbar links into the dropdown list shown on mobile devices, they need to be surrounded by a container, typically div, with the collapse and navbar-collapse classes. These enable the collapsibility of the content. In addition, an id needs to be added to the div. This id will then be used by the button to toggle the display of the menu.

Adding toggle functionality to the button

The last step is to update the button to point to the div container you created above. Add the data-targetattribute, set to the value of the id you used on the div container. Remember, whenever you use a data-target, you must use the CSS selector syntax, meaning you will need to preface the id with a #.

<buttontype=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#hamburger-navigation”>
<!– existing content –>
</button>

FULL HTML SAMPLE

<!DOCTYPE html>
<htmlxmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link href=”Content/bootstrap.min.css” rel=”stylesheet” />
<style>
body {
padding-top: 70px;
}
</style>
<title>Navbar Sample</title>
</head>
<body>
<nav class=”navbar navbar-default navbar-fixed-top”>
Navbar Example
Navigation toggle

<ul class=”nav navbar-nav” role=”menu”>
<li><a href=”#” class=”active”>Current Page</a><span class=”sr-only”>current</span></li>
<li><a href=”#”>Link</a></li>
<li class=”dropdown”>
<a class=”dropdown-toggle” role=”button” data-toggle=”dropdown”>Dropdown<span class=”caret” /></a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Option one</a></li>
<li><a href=”#”>Option two</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!– content –>
</body>
</html>

ADDING CONTENT

March 3, 2017 ~ micaktvrtko ~ Leave a comment

Brand (or Home link)

Typically you will add a link back to the home page of your site. This is often done by adding the name of your organization or application to the top of the page, or your company’s or application’s logo. To add the link to your home page, you will add a navbar-header, which will contain the a element, decorated with the navbar-brand element. If you wish to add a logo, reference the image in your hyperlink, just like you would do when making any other image a link.

<navclass=”navbar navbar-default navbar-fixed-top”>
Navbar Example

</div>

</nav>

Text

To add text, and ensure the correct color scheme, use the navbar-text class on the container element.

Sample text

Links

To add normal links that are not to be considered as part of the navbar, add the navbar-link class to the aelement. The anchor must be contained inside of a navbar-text container.

Positioning content

You can place content on the left or right of the navbar by using navbar-left and navbar-right classes, respectively.

Final HTML and result

<!DOCTYPE html>
<htmlxmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link href=”Content/bootstrap.min.css” rel=”stylesheet” />
<style>
body {
padding-top: 70px;
}
</style>
<title>Navbar Sample</title>
</head>
<body>
<nav class=”navbar navbar-default navbar-fixed-top”>
Navbar Example

</div>
</nav>
<!– content –>
</body>
</html>

ADDING LINKS

Obviously, the most important part of building navigation for a website is adding navigation links. Bootstrap offers you a full range of options when displaying links to your users.

Links container

Navbar links are added into an unordered list container. This container is decorated with nav and navbar-nav. Links are then added in as list items, and use standard HMTL for creating hyperlinks. If you wish to mark a link as the current page, decorate the li element with the active class.

<ulclass=”nav navbar-nav” role=”menu”>
<li><a href=”#” class=”active”>Current Page</a><span class=”sr-only”>current</span></li>
<li><a href=”#”>Link</a></li>
</ul>

Dropdown lists

To add a dropdown list of links, you need to add three components.

The first will be a new list item, just like before, but this time you will decorate it with the dropdown class; this will be the container for the entire dropdown component.

The second will be a link that will toggle the dropdown list, which is decorated with three attributes, class=’dropdown-toggle’, role=’button’, data-toggle=’dropdown’.

Finally, the content for the dropdown will be placed inside of an unordered list container, and decorated with the dropdown-menu class. To add links to the dropdown, you will add them to this container, just like you did when adding links to the navbar.

<liclass=”dropdown”>
<a class=”dropdown-toggle” role=”button” data-toggle=”dropdown”>Dropdown<span class=”caret” /></a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Option one</a></li>
<li><a href=”#”>Option two</a></li>
</ul>
</li>

FINAL HTML AND RESULT

<ulclass=”nav navbar-nav” role=”menu”>
<li><a href=”#” class=”active”>Current Page</a><span class=”sr-only”>current</span></li>
<li><a href=”#”>Link</a></li>
<li class=”dropdown”>
<a class=”dropdown-toggle” role=”button” data-toggle=”dropdown”>Dropdown<span class=”caret” /></a>
<ul class=”dropdown-menu”>
<li><a href=”#”>Option one</a></li>
<li><a href=”#”>Option two</a></li>
</ul>
</li>
</ul>

BOOTSTRAP AND JAVASCRIPT

March 3, 2017 ~ micaktvrtko ~ Leave a comment

Adding JavaScript

You will notice when downloading Bootstrap there are two separate JavaScript files, bootstrap.min.js, and bootstrap.js. Just as with the CSS files Bootstrap provides, the minified version is the one without anything that we humans need, like whitespace and good variable names, but is what we want to send down to the client.

The Bootstrap JavaScript library is built on, and requires jQuery. You will need to include jQuery when referencing the Bootstrap JavaScript library, and it will need to be referenced before Bootstrap.

http://..location%20of%20jQuery%20minified..
http://..location%20of%20Bootstrap..

INTRODUCING THE NAVBAR

One of the most challenging aspects of creating web apps is the fact that you’re creating an application that an extremely large number of users will access, but you won’t be providing them with a user manual. As a result, it’s key to ensure your site is intuitive and easy to use. One great way to ensure that is to have a consistent structure throughout your site, and use conventions, such as having site navigation at the top of your site. This is where the navbar comes into play. The navbar is a Bootstrap component and is designed to provide navigation for the user. It’s most commonly placed at the top of a page.

CREATING AND CONFIGURING THE NAVBAR

Getting started with the navbar

To start creating your own navbar, add an HTML5 nav element to your page, and add the navbar class to it. Alternatively, you could use a div or span element, however, best practice is to add the role=’navigation’element for accessibility.

Next, adding the navbar-default class will enable the default color scheme for navbars; navbar-inverse will use the reverse color scheme.

Finally, content, like content for your page, is placed into one of two containers: container, for a fixed-width container, or container-fluid, which will take up the entire width of the page.

— code

Positioning the navbar

You have three options when placing the navbar on your page.

The first option is to have it appear at the top of the page as a normal element, scrolling, and disappearing off the top of the browser window, along with the rest of the content. This is achieved by adding the navbar-static-top class.

— code

The second option is affix it to the top of the page, so it will not disappear when the user scrolls, but rather stay in place. This is achieved by adding the navbar-fixed-top class.

Finally, you can have the navbar use the same behavior on the bottom of the page with navbar-fixed-bottom.

If you are using either fixed option, you are required to add padding to the top (for navbar-fixed-top), or bottom (for navbar-fixed-bottom) to the body element. If you forget to add this in, the navbar will overlap the content on the page. If you see the sample above, you’ll notice the navbar is above the content, and the content starts with “Lorem ipsum dolor sit amet…” The image below shows the result of adding fixed, but not adding in the padding.

The proper HTML and CSS for a navbar-fixed-top is displayed below, with the padding. Remember that the padding must be set after the Bootstrap.min.css file is applied if you are using a seperate external stylesheet.

CREATING AND CONFIGURING THE NAVBAR

Getting started with the navbar

Next, adding the navbar-default class will enable the default color scheme for navbars; navbar-inverse will use the reverse color scheme.

<navclass=’navbar navbar-default’>

</nav>

Positioning the navbar

You have three options when placing the navbar on your page.

<navclass=’navbar navbar-default’>
</nav>

The second option is affix it to the top of the page, so it will not disappear when the user scrolls, but rather stay in place. This is achieved by adding the navbar-fixed-top class.

Finally, you can have the navbar use the same behavior on the bottom of the page with navbar-fixed-bottom.

<!DOCTYPE html>
<htmlxmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link href=”Content/bootstrap.min.css” rel=”stylesheet” />
<style>
body { padding-top: 70px; }
</style>
<title>Navbar Sample</title>
</head>
<body>
<nav class=”navbar navbar-default navbar-fixed-top”>
Sample content
</nav>
</body>
</html>

BOOTSTRAP AND VISIBILITY

March 3, 2017 ~ micaktvrtko ~ Leave a comment

Bootstrap offers you the ability to show or hide content based on both screen size and printing state. The syntax is, as with much of Bootstrap, option-screen.

The two options are either hidden or visible. Both of the options will change the default for all other screen sizes and print. In other words, hidden-sm will make the content hidden for small screens, but visible on all others; visible-sm will make the content visible on small screens, but visible on all others.

One thing to note about visible-print. visible-print, while perfect for a demonstration, as you saw in the video, does have a couple of issues. First, it is deprecated, meaning it will eventually be removed from Boostrap. Second, while it will be visible only when printing, all other content currently being displayed on the page will also be visible. If you want something to be hidden when printing, use hidden-print.

visible summary

Class	Extra small	Small	Medium	Large
visible-xs	Displayed
visible-sm		Displayed
visible-md			Displayed
visible-lg				Displayed

hidden summary

Class	Extra small	Small	Medium	Large
hidden-xs		Displayed	Displayed	Displayed
hidden-sm	Displayed		Displayed	Displayed
hidden-md	Displayed	Displayed		Displayed
hidden-lg	Displayed	Displayed	Displayed

Mobile first and controlling placement

March 3, 2017March 3, 2017 ~ micaktvrtko ~ Leave a comment

CONTROLLING PLACEMENT

The ability to resize content based on screen size is extremely powerful. It allows you to ensure that the most relevant information is readily available to the user on a page, regardless of the size of device.

But there’s more to optimizing display for different device types than just changing the size. Sometimes you need to move content higher up on the page, such as a product name, or a “Buy it now!” button. In other scenarios, you need to push content down, such as detailed information, which isn’t necessarily as important to someone just browsing your page. In fact, you might even need to just hide it all together.

Bootstrap offers you complete control over the size, and placement, of content, across all devices.

You can use three main options for controlling placement in Bootstrap. Each option has a syntax similar to sizing content. You’ll start with col, followed by the abbreviation for the screen-size, followed by the option, and then the number of columns. For example, you can move content to the right 6 columns on extra small screens by using col-xs-push-6. Here are the options available to you:

offset
- Offset will instruct Bootstrap to skip the specified number of columns before placing content. With offset, the skipped columns will be left blank.
push
- Push will instruct Bootstrap to move content to the right a specified number of columns. With push, the columns that were left blank can be used by pulling content to the left.
pull
- Pull will instruct Bootstrap to move content to the left a specified number of columns. With pull, the columns that were left blank can be used by pushing content to the right.

MOBILE FIRST

When designing pages, it’s generally a best practice to design for the mobile, or smallest, device first. It’s easier to scale content to a larger size, than it is to shrink the content. The process of designing for mobile devices first is called, creatively, mobile first.

Bootstrap is built with mobile-first in mind. When you use the different commands to control the size and placement of the items being displayed on your grid, it works best when you have the mobile layout defined, and then you use the different push and pull commands to control content placement on larger sizes.

Imagine the following scenario. Let’s imagine we have two pieces of information, or images, that we need to display to the user. Without focusing on the actual content, the scenario is this: I have content that I want to be on the left side for medium and large screens in Bootstrap terms (large screens), but on the bottom for extra-small and small screens (small screens). I also have content that I want to be on the right side for large screens, but on the top for small screens.

I’m going to represent this with text named DETAILS and LOGO, respectively.

Medium & large displays
DETAILS	LOGO

For smaller screens, the desired display is to have the LOGO on the top, and DETAILS on the bottom.

Extra-small & small displays
LOGO
DETAILS

Let’s start by building for the larger screens (medium and large). We can of course do this by just using the md abbreviation.

DETAILS
LOGO
</div>

Now let’s add the code for the smaller screens. We can do this by using the xs abbreviation.

We start by pushing the left side content (Don’t highlight this) data 12 columns to the right, which should cause it to automatically move to the next row. Remember this is the default behavior with Bootstrap grids; if something goes beyond column 12, it is automatically moved to the next row.

We then pull the right side content to the left 6 columns. This will bring it back to the beginning.

We’ll finish everything by sizing each piece of content to take up 12 columns.

DETAILS
LOGO
</div>

The result is not going to be what we want.

Extra-small & small displays
D
O

The first row, or DETAILS, will be wrong because we told Bootstrap to move it to the right 12 columns. While Bootstrap normally moves content to the next row in scenarios where the size is greater than 12 columns, it keeps it on the same row when using push, pushing it all the way off the screen.

Towards that end, with the second row, or LOGO, we pulled the data to the left 6 columns. Bootstrap will try to honor that request by again keeping it on the same row, and pulling it to the left 6 columns. The result is, again, that the content will be off the screen.

Let’s start this over again, focusing on mobile first. We know we want LOGO to be on the top, and DETAILS on the bottom. Let’s build that part first, or “mobile first”.

LOGO
DETAILS
</div>

While I put the column in the same row, I told each piece of content to be 12 columns. Bootstrap will handle this by putting the content on different rows.

Extra-small & small displays
LOGO
DETAILS

Now let’s turn our attention to the larger screens. We want DETAILS to be on the left, taking up 6 columns, and LOGO on the right, taking up 6 columns. What’s great is it makes both thinking about this, and explaining it, much simpler.

We start by sizing LOGO and DETAILS for larger screens.

LOGO
DETAILS
</div>

The output will be as follows:

Medium & large displays
LOGO	DETAILS

We want the display to have LOGO on the right, and DETAILS on the left. So we need to push LOGO over 6, and pull DETAILS over 6. Let’s add that in.

LOGO
DETAILS
</div>

And the final result will be exactly what we wanted it to be. DETAILS on the left, LOGO on the right for larger displays.

Medium & large displays
DETAILS	LOGO

For smaller screens, the desired display is to have the LOGO on the top, and DETAILS on the bottom.

Extra-small & small displays
LOGO
DETAILS

In the end, mobile first design not only worked out the way we wanted it to, but it wound up being much easier to plan as well. We sized everything for our small screens, and then just moved things around, relatively simply, for large screens. When designing with Bootstrap, you want to use mobile first.

COMMON BOOTSTRAP STARTING CLASSES

March 3, 2017 ~ micaktvrtko ~ Leave a comment

COMMON BOOTSTRAP STARTING CLASSES

When putting together the layout for a page, there are a few classes that you typically use to start. The first two help define how much space the content will take on the overall page, while the last will allow you to highlight content, such as the site’s title and introductory information.

container	The container class places content inside of a horizontal container. The size of the container will vary based on screensize. The container will stay the same width for that particular screensize. This helps developers size content appropriately for different devices.
container-fluid	The container-fluid class places content inside of a container that will always be the width of the screen. This is helpful for scenarios where the content to be displayed must use the entire browser window.
jumbotron	The jumbotron class is a common class for displaying titles for different sections of a website, or the landing page. The jumbotron typically has a highlighted background and an increased fontsize.

GRID NOTES

Always 12 columns
Smaller sizes set the default for larger sizes
- col-sm- would set the size for small, medium and large screens unless overridden by a setting specific to one of the larger sizes
There is a 30px “gutter”, or empty space, between each column (15px on each side of the column)
The gutter on the outside of the container varies based on the current screen size
- Extra small devices always use the entire width of the screen

	Extra small devices e.g. phones (< 768 px)	Small devices e.g. tablets (≥ 768 px)	Medium devices e.g. laptops (≥ 992 px)	Large devices e.g. desktops (≥ 1200 px)
Container width	None (auto)	750px	970px	1170px
Column class prefix	col-xs-	col-sm-	col-md-	col-lg-
Column width	Auto	60px	75px	95px

The screens sizes that Bootstrap uses are not random, but rather based on research on common device sizes. While you can change the screen sizes, because Bootstrap does use CSS, you want to use the defaults provided.

GRID SIZE CLASSES

Structure of Bootstrap classes for sizing grid content

col
- Short for column
- Required prefix
size abbreviation
- xs for Extra small
- sm for Small
- md for Medium
- lg for Large
Number of columns
- Integer to represent the number of columns

EXAMPLES

Let’s take a look at a couple of sample Bootstrap content sizing classes:

col-md-4 would indicate 4 columns for medium and large screens
col-sm-6 would indicate 6 columns for small, medium and large screens
col-xs-2 would indicate 2 columns for extra small, medium and large screens

Remember that screen size rules apply for the specified screen size as well as those larger than that size, unless overriden. So the following combination would indicate 2 columns for extra small screens, 6 columns for small screens, and 4 for medium and large screens.

Content

Nesting columns

The Bootstrap grid system allows developers to lay out their pages using a system that’s similar to tables, but uses CSS positioning instead of tables behind the scenes. One feature tables offer is the ability to create tables inside of a cell, so you can create complex layouts through what’s frequently referred to as “nesting”. The grid system offers the same capability.

Every row you create has 12 columns, regardless of where that row is created. If you create a section of content, and then add a row inside of there, that row has 12 columns.

Let’s take the following HTML example.

Sample content here

</div>

In that example, we would have created a section for content that is 6 columns wide, or half of the container. If we then added a new row into that space, replacing the sample content, we’d have a brand new 12 columns. However, those new columns would only take up half of the container, as they are inside of a section that is constraining it to 6 initial columns.

</div>
</div>

MODAL DIALOGS

JAVASCRIPT AND BOOTSTRAP

CREATING HORIZONTAL FORMS

Creating the form element

Creating the rows for the form content

Adding the label

Adding the input control

FULL HTML AND SCREENSHOT

ENHANCING CONTROLS

ADDING GLYPHICONS TO FORM CONTROLS

Creating the input group

Creating the input group addon

Adding the glyphicon

FULL HTML AND SCREENSHOT

BUTTONS

CREATING BUTTONS

Adding a button

BUTTON GROUPS

Creating the group

Adding radio button (or checkbox)

DEFAULT BUTTON COLORS

FULL HTML AND SCREENSHOT

VALIDATION

ENABLING INLINE VALIDATION

Add validation state to the form-group

Add icon to the textbox

FULL HTML AND SCREENSHOT

ALERTS

CREATING ALERTS

Alert container

Modifiers

Dismissible alerts

Alert content

FULL HTML

Warning

SCROLLSPY

SCROLLSPY SAMPLE

Navigation

Content

HTML and screenshot

ACCORDION

ACCORDION SYNTAX

Accordion container

Panel header

Panel content

HTML AND SCREENSHOT

CAROUSEL

CAROUSEL SYNTAX

Container

Indicators

Slides

Caption Heading One

Navigation

HTML AND SCREENSHOT

Caption Heading One

Caption Heading Two

TABS SYNTAX

Tabs

Tab content

HTML AND SCREENSHOT

Tabs

First

Second

Configuring the hamburger

Adding links to the mobile dropdown

Adding toggle functionality to the button

Brand (or Home link)

Text

Links

Positioning content

Other content

Final HTML and result

ADDING LINKS

Links container

Dropdown lists

FINAL HTML AND RESULT

Adding JavaScript

INTRODUCING THE NAVBAR

CREATING AND CONFIGURING THE NAVBAR

Getting started with the navbar