1 / 25

Twitter Bootstrap

Twitter Bootstrap. Agenda. What is it? Grids and Fluid layouts Globals and Typography Tables, Forms and Buttons Navigation Media and thumbnails Responsive JavaScript plugins. What is Twitter Bootstrap. CSS framework Makes creating layouts easier Commonly used set of classes

lisbet
Download Presentation

Twitter Bootstrap

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Twitter Bootstrap

  2. Agenda • What is it? • Grids and Fluid layouts • Globals and Typography • Tables, Forms and Buttons • Navigation • Media and thumbnails • Responsive • JavaScript plugins

  3. What is Twitter Bootstrap • CSS framework • Makes creating layouts easier • Commonly used set of classes • Responsive • JavaScript components for UI

  4. 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

  5. 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

  6. 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)

  7. 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

  8. 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

  9. 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.

  10. 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>

  11. 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>

  12. 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

  13. 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”

  14. Navigation • There are three ways of displaying nav • Tabs • Pills • Lists • Tabs can be tabbed in any direction

  15. 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

  16. 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

  17. Labels, Badges, and Progress

  18. Heroes • Hero-unit • jumbo-tronstyle component for showcasing key content • synonymous with Bootstrap at this point

  19. Thumbnails • Grids of images, video or text

  20. 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

  21. 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="btnbtn-primary">Save changes</button> </div> </div>

  22. Tooltips and Popovers • Both require a little JavaScript to turn on

  23. 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

  24. 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

  25. 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

More Related