Understanding Twitter Bootstrap 3. Version 3 of Twitter Bootstrap is a major change from all its past versions. It is a mobile-first framework and can claim to be one of the best CSS frameworks for building responsive website designs. In my last article I focused on building responsive websites using Twitter Bootstrap 2. From that, you should have an idea of how Bootstrap works. Since Twitter Bootstrap 3 is a mobile-first framework, by default whatever you design or create will be mobile compatible or responsive. Isn’t that cool? Getting Started Twitter Bootstrap has a new website design which is itself built using the Bootstrap 3 framework. You can download the archive file here. Now, we have three directories, so let’s look at each of them. Our main CSS file is bootstrap.css, and we must include that in all our HTML pages. bootstrap.min.css is just the minified version of bootstrap.css.
Consumes less bandwidth, speeds up the websiteThe font icons are responsive and resizable So what exactly we are going to build? Header Area. CSS. Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. HTML5 doctype 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. <! Doctype html><html lang="en"> ... </html> Mobile first With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>. You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. Bootstrap sets basic global display, typography, and link styles. Set background-color: #fff; on the body Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic base Set the global link color via @link-color and apply link underlines only on :hover These styles can be found within scaffolding.less.
Normalize.css <! <! Components. Available glyphs 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. 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. Don't mix with other components Icon classes cannot be directly combined with other components. Only for use on empty elements Icon classes should only be used on elements that contain no text content and have no child elements. Changing the icon font location Bootstrap assumes icon font files will be located in the .. Change the @icon-font-path and/or @icon-font-name variables in the source Less files. Use whatever option best suits your specific development setup. Accessible icons Examples Error: Enter a valid email address Example Alignment Divider. Modals. Individual or compiled Plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js).
Using the compiled JavaScript Both bootstrap.js and bootstrap.min.js contain all plugins in a single file. Include only one. Plugin dependencies Some plugins and CSS components depend on other plugins. Data attributes You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. That said, in some situations it may be desirable to turn this functionality off. $(document).off('.data-api') Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this: $(document).off('.alert.data-api') Only one plugin per element via data attributes Don't use data attributes from multiple plugins on the same element. Programmatic API $('.btn.danger').button('toggle').addClass('fat') Default settings No conflict Events What's inside.
Dialog JQUERY. Getting started. Bootstrap (currently v3.3.6) 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. Bootstrap Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included. Download Bootstrap Source code Source Less, JavaScript, and font files, along with our docs. Download source Bootstrap CDN The folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Install with Bower You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using Bower: $ bower install bootstrap Install with npm You can also install Bootstrap using npm: $ npm install bootstrap require('bootstrap') will load all of Bootstrap's jQuery plugins onto the jQuery object. Bootstrap's package.json contains some additional metadata under the following keys: Install with Composer You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using Composer: