Downloaded 120 times
Uploaded byYaowaluck Promdee
Bootstrap Framework
The document provides an overview of Bootstrap, a leading HTML, CSS, and JavaScript framework for creating responsive web projects, emphasizing its mobile-first features and ease of use. Important components such as the grid system, navigation bars, forms, and various design elements are discussed, along with practical examples and code snippets for implementation. It concludes with an assignment to create a web page on web design principles using Bootstrap.
More Related Content
Similar to Bootstrap Framework
![Bootstrap [part 1]](https://cdn.slidesharecdn.com/ss_thumbnails/bootstrappart-11-170208154053-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Bootstrap Framework
- 1. By Yaowaluck Promdee,Dr.Sumonta Kasemvilas Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web. Web Design Technology 1
- 2.
- 3. What is Bootstrap? •Scaffolding – grid system • Base CSS – typography, tables, forms, images • Components – navigation, breadcrumbs, pagination • JavaScript – jQuery plugins Web Design Technology 3
- 4. Why use Bootstrap? •Easy to use • Responsive features • Mobile-first approach • Browser compatibility Web Design Technology 4
- 5. Get Started Bootstrap •Download Bootstrap from getbootstrap.com • Include Bootstrap from a CDN Web Design Technology 5
- 6. Bootstrap CDN • Downloadform a CND (Content Delivery Network) <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></scri pt> Web Design Technology 6
- 7. Web Design Technology7 Download Bootstrap Bootstrap Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included. Source code Source Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup. Sass Bootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass- only projects.
- 8. Create Webpage withBootstrap 1. Add the HTML5 doctype 2. Bootstrap 3 is mobile-first <meta name="viewport" content="width=device-width, initial-scale=1"> The part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The part sets the initial zoom level when the page is first loaded by the browser. Web Design Technology 8
- 9. Create Webpage withBootstrap 3. Containers Bootstrap also requires a containing element to wrap site contents. There are two container classes to choose from: The .container class provides a responsive fixed width container The .container-fluid class provides a full width container, spanning the entire width of the viewport Web Design Technology 9
- 10. Grid system Extra smalldevices Phones (<768px) Small devices tablet (>=768px) Medium devices Desktops (>=992px) Large devices Desktop (>=1200px) Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoint Max container width None(auto) 750pz 970pz 1170px Class prefix .col-xs- .col-sm- .col-md- .col-lg- # of columns 12 Gutter width 30px (15px on each side of column) Max column width Auto 60px 78px 95px Offsets/Column ordering N/A Yes Web Design Technology 10
- 11. Grid system <div class="container-fluid"> <divclass="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div></div> Web Design Technology 11
- 12. Grid system For Mobileand Desktop <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> Web Design Technology 12
- 13. Responsive tables .table /.table-striped/ .table-bordered/ .table-hover <body> <div class="container"> <table class="table table-striped”> …<!– Table here --> </table> </div> </body> … … <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/ css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11. 3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/j s/bootstrap.min.js"></script> </head> Web Design Technology 13
- 14. Bootstrap Images Image shapes <imgsrc="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail"> Web Design Technology 14
- 15. Bootstrap Pager Pager isalso a form of pagination (as described in the previous chapter). Pager provides previous and next buttons (links). To create previous/next buttons, add the .pager class to an <ul> element: <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> Align Buttons Use the .previous and .next classes to align each button to the sides of the page Web Design Technology 15
- 16. Navigation Bars Bootstrap Navigationbar A standard navigation bar is created with <nav class=“navbar-default”> Just change the .navbar-default class into .navbar-inverse The .navbar-fixed-top class makes the navigation bar fixed at the top Web Design Technology 16
- 17. Bootstrap Forms Standard rulesfor all three form layouts: • Always use <form role="form"> (helps improve accessibility for people using screen readers) • Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing) • Add class .form-control to all textual <input>, <textarea>, and <select> elements Web Design Technology 17
- 18. Components Glyphicons <button type="button" class="btnbtn- default" aria-label="Left Align"> <span class="glyphicon glyphicon- align-left" aria-hidden="true"></span> </button> Web Design Technology 18
- 19. Breadcrumbs Indicate the currentpage's location within a navigational hierarchy Separators are automatically added in CSS through :before and content. class breadcrumb <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol> Web Design Technology 19
- 20. Custom content <div class="row"> <divclass="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="..." alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </div> Web Design Technology 20
- 21. Using the framework WebDesign Technology 21 Starter template Nothing but the basics: compiled CSS and JavaScript along with a container. Bootstrap theme Load the optional Bootstrap theme for a visually enhanced experience. Grids Multiple examples of grid layouts with all four tiers, nesting, and more.
- 22. Using the framework WebDesign Technology 22 Jumbotron Build around the jumbotron with a navbar and some basic grid columns. Narrow jumbotron Build a more custom page by narrowing the default container and jumbotron..
- 23. Bootstrap Case Reference: w3shools.com,getbootstrap.com Web Design Technology 23
- 24. Assignment Create a webpage to present “Principles of Web Design” from information provided using Bootstrap In hours time Web Design Technology 24
Editor's Notes
- #4 Bootstrap is a free front-end framework for faster and easier web development Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins Bootstrap also gives you the ability to easily create responsive designs
- #5 Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
- #7 If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network). MaxCDN provide CDN support for Bootstrap's CSS and JavaScript. Also include jQuery:
- #8 Bootstrap (currently v3.3.5) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
- #9 Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set: Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework. To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element:
- #10 Note: Containers are not nestable (you cannot put a container inside another container).
- #11 Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works: Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. Use rows to create horizontal groups of columns. Content should be placed within columns, and only columns may be immediate children of rows. Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts. Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows. The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content. Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present. Look to the examples for applying these principles to your code.
- #12 Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
- #13 Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
- #14 A basic Bootstrap table has a light padding and only horizontal dividers. The .table class adds basic styling to a table
- #16 What is Pager? Pager is also a form of pagination (as described in the previous chapter). Pager provides previous and next buttons (links). To create previous/next buttons, add the .pager class to an <ul> element:
- #17 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </div> </nav> <div class="container"> <h3>Basic Navbar Example</h3> <p>A navigation bar is a navigation header that is placed at the top of the page.</p> </div> </body> </html>
- #18 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Vertical (basic) form</h2> <form role="form"> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </body> </html>
- #19 Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.
- #24 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron"> <h1>My first Bootstrap website!</h1> <p>This page will grow as we add more and more components from Bootstrap...</p> <a href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-search"></span> Search</a> </div> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> <div class="row"> <div class="col-md-3"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="col-md-3"> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="col-md-3"> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> </div> <div class="col-md-3"> <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> </div> </div> </div> </body> </html>