|
- Twitter Bootstrap
- Overview of today's goals
- Download and test page setup
- Add Bootstrap To Template Site
- Page Layout
- container, rows and columns
- fixed vs. fluid layout
- Overlapping responsive layout with overridable xs, s, md, lg columns
- Offset columns
- Helper classes .pull-right and .pull-left
- Typography (basic HTML styling)
- .lead, small, mark, del, s, ins, u, strong, em, div.jumbotron
- text alignment (left, center, right, justify, nowrap)
- text transform (lowercase, uppercase, capitalize), abbr, address, blockquote/cite/.blockquote-reverse, dl.dl-horizontal, code, samp, kbd, pre, var
- tables (.table, .table-striped, .table-bordered, .table-hover, .table-condensed), row or cell classes (.active, .success, .warning, .danger, .info)
- responsive tables must be wrapped in a div with .table-responsive
- Forms
- div.form-group, label[for=""], <control>.form-control, p.help-block, label input[type="checkbox"] + text
- form.form-inline for a linear display
- div.input-group to use div.input-group-addon
- form.form-horizontal to have a 2-column display (labels on the left, controls on the right) but you must use col-* classes on label and divs containing controls
- div.checkbox and div.radio should wrap stacked options lists, optionally add the .disabled class, optionally change to .checkbox-inline or radio-inline for linear display
- p.form-control-static to display text instead of an edit control
- add .has-success, .has-warning or .has-error to div.form-group to change color according to validation state
- change control width with the col-* classes, change height by adding .input-sm or .input-lg, change size of all contents of a form group with .form-group-lg or .form-group-sm
- Buttons
- Always add the .btn class, then optionally size by adding .btn-sm, .btn-xs or .btn-lg
- Add color with .btn-default, .btn-danger, .btn-primary, .btn-success, .btn-warning, .btn-info or .btn-link
- To expand to block size add .btn-block
- attach to another form control with div.input-group > span.input-group-btn > .btn
- Button Groups with div.btn-group container
- Size all contained buttons by applying .btn-group-sm, -xs or -lg to the div.btn-group
- Next .btn-group in with .btn elements for a dropdown effect
- go vertical with .btn-group-vertical
- justify width by adding .btn-group-justified to the div.btn-group
- Labels
- Badges
- Can be used to display inverse with a span.badge embedded within a differently styled container
- Images
- .img-rounded, .img-circle or .img-thumbnail can be added for various image frames
- Common Color Themese
- .btn-, .text-, .alert-, .label-, .badge-, .progress-bar-, .list-group-item-, .panel- and .bg- can be applied with one of the following suffixes to use a standard theme
- primary
- success
- info
- warning
- danger
- Glyphicons
- Navigation Dropdowns and Button Dropdowns or with navs and pills
- Navs
- Tabs with ul.nav.nav-tabs > li[role="presentation"] > a, the selected item can have .active added
- Do the same with pills by exchanging .nav-tabs with .nav-pills, make them vertical by adding .nav-stacked or vertical with .nav-justified
- Navbar for static navigation
- Breadcrumbs for quick navigation
- Alerts
- optionally .alert-dismissible with an embedded button[data-dismiss="alert"]
- optionally embed links with a.alert-link
- ProgressBar with div.progress > div.progress-bar[role="progressbar"]
- Set state with aria-valuenow="", aria-valuemin="" and aria-valuemax=""
- optionally add text as text within the div.progres-bar
- add a standard color with a progress-bar-* class on the div.progress-bar
- add striping with .progress-bar-striped on the div.progress-bar
- add .active to a striped progress bar to animate it
- go for a stacked effect with mutliple div.progress-bar divs in div.progress, each with a specified style="width:x%"
- List Groups
- Basic form of div.list-group > div.list-group-item elements contained
- ul > li is for simple display but a can be used for links
- highlight an item by adding .active to a .list-group-item
- use a standard display color by adding .list-group-item-* classes
- subsections of an item can be defined using .list-group-item-heading and .list-group-item-text
- Panels to box things
- Basic form of div.panel
- use a standard display color by adding .panel-* classes
- optionally add child divs with .panel-heading, .panel-body or .panel-footer
- other elements, like table.table or .list-group can be defined directly under div.panel for a seamless display
- Wells also box things (simply div.well) with an optional .well-lg or .well-sm
|
