Download - Twitter Bootstrap
![Page 1: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/1.jpg)
Twitter Bootstrap
![Page 2: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/2.jpg)
Agenda• What is it?• Grids and Fluid layouts• Globals and Typography• Tables, Forms and Buttons• Navigation• Media and thumbnails• Responsive• JavaScript plugins
![Page 3: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/3.jpg)
What is Twitter Bootstrap• CSS framework• Makes creating layouts easier• Commonly used set of classes• Responsive• JavaScript components for UI
![Page 4: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/4.jpg)
Grid and layouts• Based on a 12 column grid system
– Divisible by 2 and 3• Easy to create things that line up• Fixed or fluid containers and fixed or fluid rows
• Recommendation: Always use fluid rows!– helps when extracting partials to place in modals (more
later)– fixed containers are fine for forms
• Important and tricky!– In fixed: number of columns in nested rows should add up
to the number of columns of its parent.– In fluid: number of columns in nested rows should always
add up to 12
![Page 5: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/5.jpg)
Global reset• Do a reset via normalize.css• Remove margin on the body• Set background-color: white; on the body• Use the @baseFontFamily, @baseFontSize, and
@baseLineHeight attributes as our typographic base
• Set the global link color via @linkColor and apply link underlines only on :hover
![Page 6: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/6.jpg)
Typography• font-size is 14px, with a line-height of 20px• Use normal headers, b, strong, i, p, etc.• .lead class• .text-left, .text-center, .text-
right• .text-warning, .text-error, .text-info, .text-success• abbr, address, blockquote• ul (.unstyled and .inline)• dl, dt, dd (.dl-horizontal)• code, pre (.pre-scrollable)
![Page 7: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/7.jpg)
Tables• For <table> add a “table” class (.table)
– Combine with:– .table-striped, .table-bordered, .table-hover, .table-
condensed• Supports, <thead><tr><th> and <caption>• <tr>s can add
– .warning, .error, .info, .success
![Page 8: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/8.jpg)
Forms• By default: left-aligned labels on top of form
controls• Supports <fieldset><legend>
– bold with an underline• .form-inline (to stack horizontally)• .form-horizontal (for rows)
– .control-group (like row but with more padding)– labels need .control-label (I don’t like this)– align with .controls or .form-actions for buttons
• Can use .warning, .error, .info, .success on .control-group• to change the label, input, and possible help/error
![Page 9: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/9.jpg)
Input• Surround input with <label> for checkbox/radio
– Default for checkbox is vertically stacked • Can apply .inline class to stack horizontally• Selects actually look pretty by default
– also supports multiple attribute• .search-query for type=“text” for round• Can a wrapper with .input-prepend and .input-
append to stick to inputs– spans need .add-on for styling
• Can size them in a number of ways– .input-block-level, input sizing, grid sizing
• Can use a span with .uneditable-input• Use span with .help-inline for help next to controls• Supports disabled, required, pattern, etc.
![Page 10: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/10.jpg)
Buttons• Having clear nice looking buttons greatly increases
the usability of your web site
• Can size them in a number of ways– .btn-block, .btn-large, .btn-small, .btn-mini, grid sizing
• Can be applied to <a>,<button>, or<input>
![Page 11: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/11.jpg)
Dropdowns• Drop downs are like context menus• To use dropdowns need JavaScript plugins (more
next)<div class="dropdown">
<!-- Link or button to toggle dropdown --><ul class="dropdown-menu" role="menu">
<li><a tabindex="-1" href="#">Action</a></li><li><a tabindex="-1" href="#">Another action</a></li><li class="divider"></li><li><a tabindex="-1" href="#">Separated link</a></li><li class="dropdown-submenu“> <a tabindex="-1" href="#">More options</a> <ul class="dropdown-menu"> ... </ul></li>
</ul></div>
![Page 12: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/12.jpg)
Plugins• Can be included individually or all at once
– some have required dependencies• bootstrap.js and bootstrap.min.js contain all
plugins in a single file.• Plugins can be used purely through data-markup
– without writing any JavaScript (with a couple of exceptions)• Or without any markup and solely from JavaScript
![Page 13: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/13.jpg)
Button groups
• Can combine sets of .btn-group into a .btn-toolbar
• Can also be toggled via JavaScript plugin– data-toggle=“buttons-checkbox”– data-toggle=“buttons-radio”
![Page 14: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/14.jpg)
Navigation• There are three ways of displaying nav
– Tabs
– Pills
– Lists
– Tabs can be tabbed in any direction
![Page 15: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/15.jpg)
Navbars
• Can create a navbar using a couple of divs– .navbar, and .navbar-inner– supports .brand and ul with basic .nav– supports form elements and drop downs– can .pull-left and .pull-right elements– can add .navbar-fixed-top so it stays at the top (or bottom)– navbars can be responsive– can support inverse color
![Page 16: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/16.jpg)
Breadcrumbs and pagination• Breadcrumbs by adding .breadcrumb to a <ul>
– use .divider to separate the links
• Surround the <ul> with a <div class=“pagination”>
• For both use .disabled for un-clickable links and .active to indicate current
• Can move around with .pagination-center and .pagination-right
• Add a .pager class to a <ul> to make previous and next buttons
![Page 17: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/17.jpg)
Labels, Badges, and Progress
![Page 18: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/18.jpg)
Heroes• Hero-unit
– jumbo-tron style component for showcasing key content– synonymous with Bootstrap at this point
![Page 19: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/19.jpg)
Thumbnails• Grids of images, video or text
![Page 20: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/20.jpg)
Alerts• When you need to let the user know some message
– but you want them to be able to close it
• Can use data-dismiss=“<id>” to allow closing
![Page 21: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/21.jpg)
Modals• Dialog boxes
– create <div> with .model and .hide– <a> href needs to refer to its id– data-toggle to launch and data-dismss to close
<a href="#myModal" class="btn" data-toggle="modal">Launch modal</a> <div id="myModal" class="modal hide" tabindex="-1"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3 id="myLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal">Close</button> <button class="btn btn-primary">Save changes</button> </div></div>
![Page 22: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/22.jpg)
Tooltips and Popovers
• Both require a little JavaScript to turn on
![Page 23: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/23.jpg)
Other Controls• Accordion / Collapse
– To allow viewing a single section in multiple sections of content
• Carousel– To view a collection of images– Requires a line of JavaScript $(“#mycarousel”).carousel()
to autostart• Typeahead
– input but allows autocomplete• Affix
– Like a sideway intra-page navigation system that auto-updates
![Page 24: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/24.jpg)
Responsive• Additional style sheet needed
– Requires you to make decisions about what to see in the various environments
• Use classes to turn on for specific or hide for specific environments– .visible-phone, .visible-tablet, .visible-desktop– .hidden-phone, .hidden-tablet, .hidden-desktop
• Can place sections of navbar in .nav-collapse
![Page 25: Twitter Bootstrap](https://reader035.vdocuments.us/reader035/viewer/2022062323/5681671e550346895ddb9c26/html5/thumbnails/25.jpg)
Summary• Use bootstrap to make your web pages look nice
– for demos– while you wait for designers
• Provide many of the most commonly used “controls”– which conform to the same styles
• Lavish Bootstrap to customize colors