Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Textbook to be published by Pearson Ed in early Bootstrap ITIS313 - Part 3 Resources: 1.Official Bootstrap Website ( 2.W3 Schools ( ) 3.Tutorial Point ( 4.Tutorial Republic ( ) 5.Connolly and Hoar (2015) Fundamentals of Web Development – Sections 5.6 & 5.7 1

What is Bootstrap? A CSS framework is a pre-created set of CSS classes and other software tools that make it easier to use and work with CSS. Bootstrap is a powerful front-end framework for faster and easier web development. Originally developed by Twitter, now an independent open- source framework. Current version is Bootstrap 3 It includes HTML, CSS and JavaScript based design templates for common user interface components like Typography, Forms Controls, Tables, Navigations, Dropdowns, Alerts, Tabs, Carousel and many other 2

Advantages of Bootstrap 1.Save lots of time: using the Bootstrap predefined design templates and classes and concentrate on other development work. 2.Responsive features: web pages to appear more appropriately on different devices and screen resolutions without any change in markup. 3.Consistent design: the designs and layouts of your web pages are consistent throughout your development. 4.Easy to use: Bootstrap is very easy to use. Anybody with the basic working knowledge of HTML and CSS can start development with Bootstrap. 5.Compatible with modern browsers 6.Open Source: And the best part is, it is completely free to download and use. 3

Responsive Design Bootstrap also gives you ability to create responsive layout with much less efforts. Responsive web design changes the page layout (and some content) for different windows and screen sizes, such as large screens, mobiles, tablets, etc. 4

Bootstrap Essentials 1.Add the HTML5 doctype: Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype and the needed elements 2.Bootstrap 3 is mobile-first: Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework. 5

Including Bootstrap There are different ways to include Bootstrap framework files into your pages: 1.Download and host the Bootstrap files. 2.Include Bootstrap from a CDN (Content Delivery Network) host. This is faster and easier option for our course. To apply the second way, include in the following code in your header: 6 Bootstrap CSS jQuery Bootstrap JavaScript

Bootstrap Features Bootstrap has loads of predefined classes and components, these include: Responsive Grid System Navigation Glyphicons Themes customisation Form controls and many more… We are only going to cover some of these, mainly, the first four. 7

Containers Bootstrap also requires a containing element to wrap site contents. There are two container classes to choose from: 1.The container class provides a responsive fixed width container. 2.The container-fluid class provides a full width container, spanning the entire width of the viewport. Note: Containers are not nestable (you cannot put a container inside another container). 8

Grid System The Bootstrap Grid System visualizes the webpage into a series of rows and columns, i.e. a grid. The gird 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. For example: a 6-6 split, 4-4-4, 9-3, or 3-6-3…. 9

Applying the Columns Single Rows use the class row. All columns inside a row are use the class form: col-xx-y. Where xx is the intended size (xs, sm, md, lg) and y is a column span size (from 1 to 12). 10

Grid System The Bootstrap grid system works with four screen size classes: 1.xs: for phones 2.sm: for tablets 3.md: for desktops 4.lg: for larger desktops XS, SM, MD and LG 11

Grid System - lg Large 12

Grid System - md Medium 13

Grid System – sm & xs Small X-Small 14

Combining Grid Classes You can combine these classes in one class, for example on a desktop screen you can have a 9/3 split and small screens, and a 6/6 split for medium screens. Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs..col-xs-12.col-md-8.col-xs-6.col-md-4.col-xs-6.col-md-4 15

Grid Offset Create a gap between your columns using a grid offset Move columns to the right using.col-md-offset-* classes. These classes increase the left margin of a column by * columns: 16.col-md-6.col-md-5 and offset-1

Visible or Hidden Element We can specify a screen size for elements to be visible or hidden according to different screen sizes. Use class visible-xx or hidden-xx in a div to show or hide the element in that screen mode. Example: Only show the img element in medium and large resolutions: 17

Navigation 1.Create a list of links for the navigation bar 2.Encompass the list with nav HTML5 element and assign it with a class navbar. 3.Assign a title with navbar-brand class. 4.Assign the links list with a nav navbar-nav class and a navbar-right class to aligned it to the right. 5.Set an highlighted active link with class active. Navigation Bar WebSiteName Page 1 Page 2 Page 3 18

Navigation That’s how the navigation bar appears: Navigation links appearance can be changed to: o Pills o Tabs Pills and Tabs 19

Dropdown Links Menu Navigation bars can also hold dropdown menus. To add a drop down list to a link item: 1.Add a class dropdown to the link list item 2.Add a class dropdown-toggle ; an attribute data- toggle="dropdown" and a span with class caret to the link item. 3. Add a class dropdown-menu to the drop down link list items. 20

Dropdown Links Menu 21 Page 1 Page 1-1 Page 1-2 Page 1-3

Many more components Use the resources listed on the first slide to learn more about Bootstrap components and features. Particularly the official Bootstrap and W3 Schools websites. 22 And themes and customizations Typography