MIS / CIT 310 Responsive Design / Bootstrap

[Pages:17]MIS / CIT 310 Responsive Design / Bootstrap

To gain a fuller appreciate for Responsive Design, please review Chapter 8. Another great resource is:

Overall responsive design is your html page `responding' to the size of the device that is displaying the page and changing the order/width of the items to be best viewed on that page. Thus, a page may look good on a monitor, tablet or smart device.

Keys to responsive design are style sheets as well as a new term `media queries'. Think of a media query is a question to your browser that checks the size of the screen that revises the size/appearance/order of items based on the size of the screen

If you use responsive design then the easiest approach is to make sure all your segments are `fluid' or %, versus a fixed number of pixels (i.e. width=20% versus width=125px), however if you have items that need to be a fixed width (i.e. an Aside with a calendar) this is not always the best approach.

"Bootstrap" is an enhancement on the basic responsive design concept as it is a series of jQuery libraries and style pages that make your job even easier, you would link to the bootstrap.js and .css files like we have done in prior projects

Basic steps to using Bootstrap in a web site

Overall, the concepts are the same as what we have done in the past, build links to the style sheets for bootstraps, build links to the javascript files, and then build the proper tags that use the classes and styles in the .css files.

1) Start a new web site so we can demonstrate some bootstrap examples a. In VS ? New WebSite (point to your desktop), name the folder bootstrapStart b. Create the following folders: images, docs, includes (others will come shortly) c. Add a new HTML page, name it: default.html page to your site d. Shrink Visual Studio

2) Go to a) Download the zip file and save to your desktop

b) Unzip (right click and send to:Compressed) the bootstrap file and look at the 3 folders: css, fonts and js

c) Copy the CSS folder into your bootstrapStart folder on your desktop d) Copy the fonts folder into your bootstrapStart folder e) Copy the js folder into your bootstrapStart folder.

3) In VS hit the `refresh' or recycle icon and you should see all of your new folders

4) From the page scroll down until you see the heading "Basic Template", click the copy and replace the code you have in your default.html page with the code you just copied a. Notice the code has built the links for you to the .css files and the .js files as well as some additional files that are in the bootstrap libraries.

5) Save and run your page in Chrome, it won't look like much at this point but we are checking for any errors.

6) Change the title tag to be your name ? my first bootstrap

7) Now let's add in a nav (menu) that will resize itself based on the width of the device. a. Copy and paste the following into notepad and then paste into your body of your document after the h1 tag.

Toggle navigation Web Site Name

Home Next Page Next Page

b. Save and test c. You do have some options on the nav bar, for example if you wanted a

black background, you could change the first line of the nav menus to

d. If you don't like the black background, you could go to the boostrap.css and search for navbar-inverse and change the background color to something else

e. Or if you wanted it to be fixed to the top of the page (very handy on smart devices) your top line would be:

I tend to like the one above to fix the location.

8) In HMTL, change the h1 tag to now be the name of your page for project 3

9) Change WebsiteName ? to be the name of your faculty/or page a. Modify the href="#" to be the page name of your faculty page, most likely default.html

10) Revise Page 1 and 2 to be Education and Publication respectively and update the links( in the a href) a. Change the a href="#" for home to be default.html

11) Revise Page 1 and 2 to be Education and Publication respectively and update the links( in the a href)

12) If you wanted an additional drop down menu you would revise one of the items to be:

Page 1 Page 1-1 Page 1-2 Page 1-3

13) Save test, reduce the size of your screen and does the nav bar become a drop down list for easier viewing on a smart devise?

Advanced Bootstrap Techniques ? Understanding the Grid System

Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1

span 4

span 4

span 4

span 4

span 8

span 6

span 6

span 12

Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Grid Classes

The Bootstrap grid system has four classes:

xs (for phones) sm (for tablets) md (for desktops) lg (for larger desktops)

The classes above can be combined to create more dynamic and flexible layouts.

--- the above is key!

Be sure that they all add up to 12 if they are in the same row.

Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:

...

First; create a row (). Then, add the desired number of columns (tags with appropriate.col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.

Below we have collected some examples of basic Bootstrap grid layouts.

Three Equal Columns

.col-sm-4 .col-sm-4 .col-sm-4 The following example shows how to get a three equal-width columns starting at tablets and scaling to large desktops. On mobile phones, the columns will automatically stack:

Example

.col-sm-4 .col-sm-4 .col-sm-4

Two Unequal Columns

.col-sm-4 .col-sm-8 The following example shows how to get two various-width columns starting at tablets and scaling to large desktops:

Example

.col-sm-4 .col-sm-8

More grid examples:





There is a bootstrap tutorial in the inclassAssignments folder on miscapstone

Other bootstrap features you may be interested in knowing:

Bootstrap Panels (see csb.uncw.edu for example of

panel ? it's the shading around a column) Can be added to the column to create structure around the text

Panels (Take a column and make it a panel)

A panel in bootstrap is a bordered box with some padding around its content: A Basic Panel Panels are created with the .panel class, and content inside the panel has a .panel-body class:

Example

A Basic Panel

The .panel-default class is used to style the color of the panel. See the last example on this page for more contextual classes.

Panel Heading

Panel Heading Panel Content The .panel-heading class adds a heading to the panel:

Example

Panel Heading

Panel Content

Panel Footer

Panel Content Panel Footer The .panel-footer class adds a footer to the panel:

Example

A Basic Panel Panel Footer

Panel Group

To group many panels together, wrap a with class .panel-group around them.

The .panel-group class clears the bottom-margin of each panel:

Example

Panel Content Panel Content

Try it Yourself ?

Panels with Contextual Classes

To color the panel, use contextual classes (.panel-default, .panel-primary, .panelsuccess,.panel-info, .panel-warning, or .panel-danger):

Example

Panel with panel-default class

Panel Content Panel with panel-primary class Panel Content Panel with panel-success class Panel Content Panel with panel-info class Panel Content Panel with panel-warning class Panel Content Panel with panel-danger class Panel Content

Bootstrap Buttons

Button Styles

Bootstrap provides seven styles of buttons:

To achieve the button styles above, Bootstrap has the following classes:

.btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link

The following example shows the code for the different button styles:

Example

Default Primary Success Info Warning Danger Link

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download