Bootstrap: A framework for CSS Jay Urbain, Ph.D. Credits: http://getbootstrap.com/ https://getbootstrap.com/docs/4.0/getting-started/introduction/ http://www.tutorialspoint.com/bootstrap/ http://www.w3schools.com/bootstrap/ 1
What is Bootstrap? l Bootstrap is a mobile first front-end framework for faster and easier web development. l Uses HTML, CSS, and JavaScript. l Developed by Mark Otto and Jacob Thornton at Twitter. l Released as open source in August 2011 on GitHub. l Very popular. #1 in 2014 on GitHub. One of the most popular web front-end framework. l If you’re going to do web development professionally, you should know Bootstrap. 2
Bootstrap Preprocessors* Bootstrap ships with vanilla CSS, but its source code utilizes the l Sass CSS preprocessors. You can get started with precompiled CSS or build on the source. l One framework, every device. Bootstrap scales your websites and applications with a single code l base, from phones to tablets to desktops with CSS media queries. Full of features You get extensive documentation for common HTML elements, l dozens of custom HTML and CSS components, and very nice jQuery plugins. *Pre-processors extend CSS with variables, operators, interpolations, functions, mixins and many more other usable assets. https://htmlmag.com/article/an-introduction-to-css-preprocessors- 3 sass-less-stylus
Bootstrap Examples https://getbootstrap.com/docs/4.1/getting-started/introduction/ source 4 precompiled
Starter Template https://getbootstrap.com/docs/4.1/getting-started/introduction/ Bootstrap requires the use of the HTML5 doctype. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head> Bootstrap CSS jQuery, Popper, and Bootstrap JS 5
Bootstrap Examples https://getbootstrap.com/docs/3.3/getting-started/#examples l Get the source code for every example below by downloading the Bootstrap l repository. Examples can be found in the docs/examples/ directory Note: navigate source to examples (boostrap-3.3.7) 6
Bootstrap enhances HTML and CSS to make styling websites easier and consistent l For example, Bootstrap provides 7 styles of Buttons: l Bootstrap uses predefined HTML classes (along with predefined CSS rules) to provide this styling: <button type="button" class="btn btn-default">BUTTON</button> 7 bootstrap/bootstrap-gs.html
Additional Bootstrap button classes l Bootstrap provides four button size classes l …and classes to indicate active (pressed) or disabled (unclickable) states: 8
Why Use Bootstrap? Mobile first approach − Framework consists of Mobile first styles l throughout the entire library instead of using them in separate files. Browser Support − Supported by all popular browsers. l Easy to get started − Knowledge of HTML and CSS. Good l documentation. Responsive design − Bootstrap's responsive CSS adjusts to l Desktops, Tablets and Mobiles. Open source. l 9
What does the Bootstrap package include? Scaffolding − Provides a basic structure with Grid System , link l styles , and background . CSS − Comes with the feature of global CSS settings, fundamental l HTML elements styled and enhanced with extensible classes, and an advanced grid system. Components − Contains over a dozen reusable components built to l provide iconography, dropdowns, navigation, alerts, pop-overs, and much more. JavaScript Plugins − Bootstrap contains over a dozen custom l jQuery plugins. Customize − You can customize Bootstrap's components, and l jQuery plugins to get your very own version. 10
Try Bootstrap The CDN (content delivery network) should be fine. Note: It’s also cached after first use. http://getbootstrap.com/ You can download the Bootstrap repository and explore the samples l in ../ docs/example sub-directory https://github.com/twbs/bootstrap/archive/v3.3.7.zip You can also access the examples here (slightly older version): l https://getbootstrap.com/docs/3.3/getting-started/#examples Explore Bootstrap tutorials: l http://www.tutorialspoint.com/bootstrap/ l http://www.w3schools.com/bootstrap/ l 11
Bootstrap HTML Template Use the HTML 5 DOCTYPE 1. Specify lang=“en” in the <html> tag 2. Add the <meta name=“viewport> tag to accommodate mobile 3. devices (zoom and pinch) Include Bootstrap’s: jQuery.js and popper.js prior to 4. bootstrap.min.js since Bootstrap relies on them. Enclose the entire web page content in a <div> (or <section>) that 5. uses the predefined container or container-fluid class 12
What is Bootstrap Grid System? The mobile first fluid grid system scales up to 12 columns as the device or l viewport size increases. Includes predefined classes for easy layout options, as well as l extensions. Bootstrap is mobile first in that the code for Bootstrap starts by targeting l smaller screens like mobile devices, tablets, and then “expands” components and grids for larger screens such as laptops, desktops. 13
Working of the Bootstrap Grid System Grid systems are used for creating page layouts through a series of rows and columns that house your content. Rows must be placed within a .container or .container-fluid class for l proper alignment and padding. Use rows to create horizontal groups of columns. l Content is placed within the columns, and only columns may be the l immediate children of rows. Predefined grid classes like .row and .col-xs-4 are available for l making grid layouts. Columns create gutters (gaps between column content) via padding. l Padding is offset in rows for the first and the last column via l negative margin on .rows to maintain consistent sizing. Grid columns are created by specifying the number of twelve l available columns you wish to span. E.g., three equal columns 14 would use three .col-xs-4.
Containers Containers are the most basic layout element in Bootstrap and are l required when using the default grid system. Choose from a responsive, fixed-width container or a fluid-width l (meaning it’s 100% wide all the time). While containers can be nested, most layouts do not require a l nested container. 15
Responsive breakpoints To be mobile first, BS uses a handful of media queries to create l breakpoints for layouts and interfaces. These breakpoints are mostly based on minimum viewport widths l and allows scaling elements up as the viewport changes. Bootstrap uses media query ranges—or breakpoints—in Sass files l for layout, grid system, and components. // Extra small devices (portrait phones, less than 576px) l // No media query since this is the default in Bootstrap l // Small devices (landscape phones, 576px and up) l @media (min-width: 576px) { ... } l 16
Media Queries l A media query is a "conditional CSS rule". l Media Queries in Bootstrap allow you to move, show and hide content based on the viewport size. /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... } 17
Z-index Several Bootstrap components utilize z-index , the CSS property that l helps control layout by providing a third axis to arrange content. A default z-index scale in Bootstrap layers, navigation, tooltips, l popovers, modals, and more. $zindex-dropdown: 1000 !default; l $zindex-sticky: 1020 !default; l $zindex-fixed: 1030 !default; l $zindex-modal-backdrop: 1040 !default; l $zindex-modal: 1050 !default; l $zindex-popover: 1060 !default; l $zindex-tooltip: 1070 !default; l Background elements—like the backdrops tend to reside on a lower z-indexes, l while navigation and popovers utilize higher z-indexes to ensure they overlay surrounding content. 18
Grid Classes The Bootstrap grid system has four classes: l xs (for phones) l sm (for tablets) l md (for desktops) l lg (for larger desktops) The classes above can be combined to create more dynamic and flexible layouts. The correct class is selected dynamically through use of a media query. 19
Basic Structure of a Grid 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. Examples: <div class="row"> <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 class="col-sm-8">.col-sm-8</div> <div class="col-sm-4">.col-sm-4</div> </div> 20 </div>
Tables 21
Recommend
More recommend
