Bootstrap day1
3 likes647 views
Bootstrap is a free front-end framework for developing responsive, mobile-first websites and web applications. It contains HTML and CSS-based design templates for common tasks like building layouts, user interfaces, forms, and navigation, as well as optional JavaScript plugins. Bootstrap can be downloaded or used via a CDN, and includes a grid system, tables, images, jumbotron, wells, alerts, and buttons. The grid system uses 12 columns that automatically re-arrange on different screen sizes, and features different classes for tablet, desktop, and larger desktop layouts.
Bootstrap day1
- 1. Day One Mohammad Rafi Haidari
- 2. • Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. • Bootstrap is completely free to download and use! • 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 What is Bootstrap?
- 3. 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: http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css Where to Get Bootstrap?
- 4. Bootstrap 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: Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
- 5. Bootstrap Grid System Grid Classes The Bootstrap grid system has four classes: • xs (for phones) • sm (for tablets) • md (for desktops) • lg (for larger desktops) First; create a row (<div class="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. <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>
- 6. Bootstrap Tables The .table class adds basic styling to a table: The .table-striped class adds zebra-stripes to a table: The .table-bordered class adds borders on all sides of the table and cells: The .table-hover class enables a hover state on table rows: Responsive Tables: The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference: .success .info .warning .danger The contextual classes: used to color table rows (<tr>) or table cells (<td>)
- 7. Bootstrap Images Responsive Images: 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-rounded class adds rounded corners to an image (IE8 does not support rounded corners): The .img-circle class shapes the image to a circle (IE8 does not support rounded corners): The .img-thumbnail class shapes the image to a thumbnail:
- 8. Bootstrap 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:
- 9. Bootstrap Wells The .well class adds a rounded border around an element with a gray background color and some padding: Change the size of the well by adding the .well-sm class for small wells or .well-lg class for large wells: <div class="well well-sm"> Small Well </div>
- 10. Bootstrap Alerts Bootstrap provides an easy way to create predefined alert messages: Alerts are created with the .alert class, followed by one of the four contextual classes .alert-success,.alert-info, .alert-warning or .alert-danger: Closing Alerts To close the alert message, add class="close" and data-dismiss="alert" to a link or a button element: Animated Alerts The .fade and .in classes adds a fading effect when closing the alert message:
- 11. Bootstrap Buttons Bootstrap provides seven styles of buttons: •btn-default •btn-primary •btn-success •btn-info •btn-warning •btn-danger •btn-link The button classes can be used on an <a>, <button>, or <input> element: Bootstrap provides four button sizes: •btn-lg •btn-md •btn-sm •btn-xs Add class .btn-block to create a block level button.
- 12. Any Question?
- 13. Thank You.