Download
twitter bootstrap n.
Skip this Video
Loading SlideShow in 5 Seconds..
Twitter Bootstrap PowerPoint Presentation
Download Presentation
Twitter Bootstrap

Twitter Bootstrap

235 Vues Download Presentation
Télécharger la présentation

Twitter Bootstrap

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