Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Transcript of Twitter Bootstrap
How to Download and Install Bootstrap
• The most popular front-end framework for developing responsive, mobile first projects on the web.
• Download the bootstrap files from http://getbootstrap.com/
• Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:
Including Bootstrap within the Template
jQuery needs to be included before including bootstrap in the template.
We can include bootstrap from our local or from the CDN provided by MaxCDN.
Basic HTML Template
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
To ensure proper rendering and touch zooming, add the viewport meta tag to your
<meta name="viewport" content="width=device-width, initial-scale=1">
You can disable zooming capabilities on mobile devices by adding user-scalable=no to the view port meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
HTML 5 doctype
• Set background-color: #fff; on the body
• Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic
• Set the global link color via @link-color and apply link underlines only on :hover
Bootstrap sets basic global display, typography, and link styles. Specifically, we:
TYPOGRAPHY AND LINKS
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.
Preserve useful browser defaults rather than erasing them.
Normalize styles for a wide range of HTML elements.
Correct bugs and common browser inconsistencies.
Improve usability with subtle improvements.
Explain the code using comments and detailed documentation.
Easily centre a page's contents by wrapping its contents in a container. Containers set width at various media query breakpoints to match our grid system.
Note that, due to padding and fixed widths, containers are not nestable
Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid
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.
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.
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
Use .table-striped to add zebra-striping to any table row within the <tbody>.
Add .table-hover to enable a hover state on table rows within a <tbody>.
Add .table-bordered for borders on all sides of the table and cells.
Add .table-condensed to make tables more compact by cutting cell padding in half.
Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
Types of Forms
Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within view ports that are at least 768px wide.
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.
Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
<img src="..." class="img-responsive" alt="Responsive image">
Add classes to an <img> element to easily style images in any project.
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
Navs, Tabs & Pills
How to use:
For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.
<span class="glyphicon glyphicon-search"></span>
Wrap a series of buttons with .btn in .btn-group.
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
Single button dropdowns
Turn a button into a dropdown toggle with some basic markup changes.
Single button dropdowns - Example
Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
Navs, Tabs & Pills
Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.
Note the .nav-tabs class requires the .nav base class.
Navs, Tabs & Pills
Take that same HTML, but use .nav-pills instead:
Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
Remove the .sr-only class from within the progress bar to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
Panel with heading
Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading.
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Includes 200 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.
Form - Example
Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through :before and content.