Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01
-
Upload
xerardo-pazos -
Category
Documents
-
view
21 -
download
0
description
Transcript of Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01
![Page 1: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/1.jpg)
Bootstrap 3Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
![Page 2: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/2.jpg)
About me
Cedric SpillebeenDrupal, CSS3, HTML5 & [email protected] - @CedricSwww.cedric-spillebeen.be
User-friendly websites with Drupal.Belgium ( Kortrijk )[email protected] - @Deftig_bewww.deftig.be
![Page 4: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/4.jpg)
Bootstrap 3Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
![Page 5: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/5.jpg)
What is Bootstrap?
● Bootstrap is an open source product from Mark Otto and Jacob Thornton who, when it was initially released, were both employees at Twitter.
● There was a need to standardize the frontend toolsets of engineers across the company.
![Page 6: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/6.jpg)
What is Bootstrap?
● Since Bootstrap launched in August 2011, it has taken off in popularity.
● It has evolved from being an entirely CSS-driven project to include a host of JavaScript plugins and icons.
![Page 8: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/8.jpg)
Getting started
● Getting started with Bootstrap is as simple as dropping some CSS and JavaScript into the root of your site:http://getbootstrap.com/getting-started/
● Customize variables, components, JavaScript plugins, and more: http://getbootstrap.com/customize/
![Page 9: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/9.jpg)
Getting started
● The fastest way to get Bootstrap is to download the compiled and minified versions of our CSS and JavaScript, along with the included fonts. No documentation or original source files are included:http://getbootstrap.com/getting-started/
![Page 11: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/11.jpg)
Content Delivery Network
● The folks over at NetDNA have graciously provided CDN support for Bootstrap's CSS and JavaScript:
Read more: http://www.bootstrapcdn.com/
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
![Page 13: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/13.jpg)
LESS compilation
● If you download the original files, you need to compile Bootstrap's LESS files into usable CSS. To do that, Bootstrap only officially supports Recess, Twitter's CSS hinter built on top of less.js.
![Page 15: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/15.jpg)
What’s includedBootstrap/├── css/│ ├── bootstrap.css│ ├── bootstrap.min.css│ ├── bootstrap-theme.css│ ├── bootstrap-theme.min.css├── js/│ ├── bootstrap.js│ ├── bootstrap.min.js└── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
● This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project.
● Please note that all JavaScript plugins require jQuery to be included.
![Page 17: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/17.jpg)
CSS
● Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
![Page 18: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/18.jpg)
HTML5 doctype
● Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype.
<!DOCTYPE html>
<html lang="en">
...
</html>
![Page 19: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/19.jpg)
Mobile first
● Bootstrap 3 is mobile first.● To ensure proper rendering and touch
zooming, add the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" >
● Disable zooming capabilities on mobile devices by adding user-scalable=no:
![Page 20: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/20.jpg)
Responsive images
● 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" >
![Page 21: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/21.jpg)
Typography and links
● Bootstrap sets basic global display, typography, and link styles. These styles can be found within scaffolding.less.
![Page 22: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/22.jpg)
Normalize
● Normalize.css is a modern, HTML5-ready alternative to CSS resets.
● Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.
Read more: http://necolas.github.io/normalize.css/
![Page 23: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/23.jpg)
Grid system
● Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Read more:http://getbootstrap.com/css/#grid
![Page 24: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/24.jpg)
Typography
● Headings● Body copy● Emphasis ( Small, strong, em )● Abbreviations● Addresses● Blockquotes● ListsRead more:http://getbootstrap.com/css/#type
![Page 25: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/25.jpg)
Code
● Inline ( <code> )● Basic block ( <pre> )
Read more:http://getbootstrap.com/css/#code
![Page 26: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/26.jpg)
Tables
● Basic tables● Striped rows● Bordered table● Hover rows● Condensed table● Contextual classes● Responsive tablesRead more:http://getbootstrap.com/css/#tables
![Page 27: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/27.jpg)
Forms
● Basic form● Inline form● Horizontal form● Supported controls● Static control● Control states● Control sizing● Help textRead more: http://getbootstrap.com/css/#forms
![Page 28: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/28.jpg)
Buttons
● Options● Sizes● Disabled state● Button tags
Read more: http://getbootstrap.com/css/#buttons
![Page 29: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/29.jpg)
Images
● Add classes to an <img> element to easily style images in any project:
Read more: http://getbootstrap.com/css/#images
![Page 30: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/30.jpg)
Helper classes
● Close icon ( .close )● Float left ( .pull-left )● Float right ( .pull-right )● Clearfix ( .clearfix )● Screen readers only ( .sr-only )
Read more: http://getbootstrap.com/css/#helper-classes
![Page 31: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/31.jpg)
Responsive utilities
● Responsive classes● Print classes● Test cases
○ Visible on…○ Hidden on…
Read more: http://getbootstrap.com/css/#responsive-utilities
![Page 33: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/33.jpg)
Components
● Over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more.
![Page 34: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/34.jpg)
Components
● Glyphicons● Dropdowns● Button groups● Button dropdowns● Input groups● Navs● Navbar● Breadcrumbs● Pagination● Labels
● Badges● Jumbotron● Page header● Thumbnails● Alerts● Progress bars● Media object● List group● Panels● Wells
![Page 36: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/36.jpg)
Javascript
● Bring Bootstrap's components to life with over a dozen custom jQuery plugins.
● Easily include them all, or one by one.
Read more:http://getbootstrap.com/javascript/
![Page 37: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/37.jpg)
Javascript
● Transitions● Modal● Dropdown● Srollspy● Tab● Tooltip● Popover● Alert● Button
● Collapse● Carousel● Affix
![Page 39: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/39.jpg)
Customize and download
● Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.
Read more:http://getbootstrap.com/customize/
![Page 40: Bootstrap3 Twitterbootstrap3 Cedricspillebeen Deftig 130822153749 Phpapp01](https://reader034.fdocuments.us/reader034/viewer/2022051518/55cf98a1550346d03398c2a0/html5/thumbnails/40.jpg)
Questions?
Cedric SpillebeenDrupal, CSS3, HTML5 & [email protected] - @CedricSwww.cedric-spillebeen.be
User-friendly websites with Drupal.Belgium ( Kortrijk )[email protected] - @Deftig_bewww.deftig.be