Downloaded 83 times
Uploaded byMcSoftsis
Bootstrap 3
Bootstrap is a free front-end framework for building responsive, mobile-first websites. It includes HTML and CSS templates for common elements like typography, forms, buttons, navigation, tables, images and more. Bootstrap also utilizes a responsive 12-column grid system and is compatible with all modern browsers. Websites built with Bootstrap are automatically responsive on devices ranging from small phones to large desktops.
More Related Content
Bootstrap 3
- 1. Bootstrap 3 Responsive WebDesign With Bootstrap
- 2. What is Bootstrap? 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
- 3. What is ResponsiveWeb Design? Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.
- 4. Why Use Bootstrap? 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)
- 5. Where to GetBootstrap? There are two ways to start using Bootstrap on your own web site. You can: Download Bootstrap from getbootstrap.com Include Bootstrap from a CDN
- 6. Bootstrap CDN Ifyou don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network). MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:
- 7. MaxCDN: <!-- Latestcompiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3. 7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.j s"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap. min.js"></script>
- 8. Create First WebPage With Bootstrap 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: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html>
- 9. Bootstrap 3 ismobile-first 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: <meta name="viewport" content="width=device-width, initial-scale=1">
- 10. Containers Bootstrap alsorequires 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 Note: Containers are not nestable (you cannot put a container inside another container).
- 11. Example <!DOCTYPE html> <htmllang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min. css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div> </body> </html>
- 12. Example-02 <!DOCTYPE html> <htmllang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min. css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div> </body> </html>
- 13. Bootstrap Grids Bootstrap'sgrid system allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:
- 14.
- 15. Grid Classes TheBootstrap 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.
- 16. Three Equal Columns <div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> </div>
- 17. Two Unequal Columns <div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>
- 18. Bootstrap Text/Typography Bootstrap'sglobal default font-size is 14px, with a line-height of 1.428. This is applied to the <body> element and all paragraphs (<p>). In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).
- 19. <h1> - <h6> h1 Bootstrap heading (36px) h2 Bootstrap heading (30px) h3 Bootstrap heading (24px) h4 Bootstrap heading (18px) h5 Bootstrap heading (14px) h6 Bootstrap heading (12px)
- 20. <small> In Bootstrapthe HTML <small> element is used to create a lighter, secondary text in any heading:
- 21. <mark> Bootstrap willstyle the HTML <mark> element in the following way: <div class="container"> <h1>Highlight Text</h1> <p>Use the mark element to <mark>highlight</mark> text.</p> </div>
- 22. <abbr> <div class="container"> <h1>Abbreviations</h1> <p>The abbr element is used to mark up an abbreviation or acronym:</p> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> </div>
- 23. <blockquote> <div class="container"> <h1>Blockquotes</h1> <p>The blockquote element is used to present content from another source:</p> <blockquote> <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p> <footer>From WWF's website</footer> </blockquote> </div>
- 24. Contextual Colors andBackgrounds Bootstrap also has some contextual classes that can be used to provide "meaning through colors". The classes for text colors are:.text-muted, .text-primary, .text-success, .text-info, .text-warning, and .text-danger:
- 25. Example <div class="container"> <h2>Contextual Colors</h2> <p>Use the contextual classes to provide "meaning through colors":</p> <p class="text-muted">This text is muted.</p> <p class="text-primary">This text is important.</p> <p class="text-success">This text indicates success.</p> <p class="text-info">This text represents some information.</p> <p class="text-warning">This text represents a warning.</p> <p class="text-danger">This text represents danger.</p> </div>
- 26. Back-Ground The classesfor background colors are:.bg-primary, .bg-success, .bg-info, .bg- warning, and .bg-danger: <div class="container"> <h2>Contextual Backgrounds</h2> <p>Use the contextual background classes to provide "meaning through colors":</p> <p class="bg-primary">This text is important.</p> <p class="bg-success">This text indicates success.</p> <p class="bg-info">This text represents some information.</p> <p class="bg-warning">This text represents a warning.</p> <p class="bg-danger">This text represents danger.</p> </div>
- 27. Bootstrap Tables BootstrapBasic Table A basic Bootstrap table has a light padding and only horizontal dividers. The .table class adds basic styling to a table: <table class="table"> </table>
- 28. Striped Rows The.table-striped class adds zebra-stripes to a table: <table class="table table-striped">
- 29. Bordered Table The.table-bordered class adds borders on all sides of the table and cells: <table class="table table-bordered">
- 30. Hover Rows The.table-hover class adds a hover effect (grey background color) on table rows: <table class="table table-hover">
- 31.
- 32. Rounded Corners The.img-rounded class adds rounded corners to an image (IE8 does not support rounded corners): <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">
- 33. Circle The .img-circleclass shapes the image to a circle (IE8 does not support rounded corners): <img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">
- 34. Thumbnail The .img-thumbnailclass shapes the image to a thumbnail: <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
- 35. Responsive Images Imagescome in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen. Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element. The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image: <img class="img-responsive" src="img_chania.jpg" alt="Chania">
- 36.
- 37. Ans <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <a href="/w3images/lights.jpg"> <img src="/w3images/lights.jpg" alt="Lights" style="width:100%"> <div class="caption"> <p>Lorem ipsum...</p> </div> </a> </div> </div> </div>
- 38. Bootstrap Jumbotron andPage Header reating a Jumbotron A jumbotron indicates a big box for calling extra attention to some special content or information. A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it. Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes. Use a <div> element with class .jumbotron to create a jumbotron:
- 39. Example <div class="container"> <divclass="jumbotron"> <h1>Bootstrap Tutorial</h1> <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p> </div> <p>This is some text.</p> <p>This is another text.</p> </div>
- 40. Wells The .wellclass adds a rounded border around an element with a gray background color and some padding: <div class="well">Basic Well</div>
- 41.
- 42. Example <div class="alertalert-success"> <strong>Success!</strong> Indicates a successful or positive action. </div> <div class="alert alert-info"> <strong>Info!</strong> Indicates a neutral informative change or action. </div> <div class="alert alert-warning"> <strong>Warning!</strong> Indicates a warning that might need attention. </div> <div class="alert alert-danger"> <strong>Danger!</strong> Indicates a dangerous or potentially negative action. </div>
- 43. Closing Alerts Toclose the alert message, add a .alert-dismissable class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear). <div class="alert alert-success alert-dismissable"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <strong>Success!</strong> Indicates a successful or positive action. </div>
- 44. Animated Alerts The.fade and .in classes adds a fading effect when closing the alert message: <div class="alert alert-danger alert-dismissable fade in"> </div>
- 45. Button Styles Bootstrapprovides different styles of buttons:
- 46. Example <button type="button"class="btn">Basic</button> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button>
- 47. Button Sizes <buttontype="button" class="btn btn-primary btn-lg">Large</button> <button type="button" class="btn btn-primary btn-md">Medium</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary btn-xs">XSmall</button>
- 48. Block Level Buttons <button type="button" class="btn btn-primary btn-block">Button 1</button>
- 49. Bootstrap Glyphicons Glyphicons Bootstrap provides 260 glyphicons from the Glyphicons Halflings set. Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc. Glyphicon Syntax <span class="glyphicon glyphicon-name"></span>
- 50. Badges Badges arenumerical indicators of how many items are associated with a link: <a href="#">News <span class="badge">5</span></a><br> <a href="#">Comments <span class="badge">10</span></a><br> <a href="#">Updates <span class="badge">2</span></a>
- 51. Bootstrap Progress Bars A progress bar can be used to show a user how far along he/she is in a process. Bootstrap provides several types of progress bars. <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> <span class="sr-only">70% Complete</span> </div> </div>
- 52. Colored Progress Bars Contextual classes are used to provide "meaning through colors". The contextual classes that can be used with progress bars are: .progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger
- 53. Bootstrap Pagination Ifyou have a web site with lots of pages, you may wish to add some sort of pagination to each page. A basic pagination in Bootstrap looks like this:
- 54. Example <ul class="pagination"> <li><ahref="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul>