Bootstrap

https://docs.google.com/presentation/d/1ZVga8B_Mg_uEYL352FyVzo0E96MVnh_5OgWf44tDGbs/edit?usp=sharing

TO DO:

• dropdowns
• templates
• customization
• prep example files

• Overview / History
• Page setup
  • css
  • JS
    • jquery first
    • individual plugins (i.e. carousel.js) or all (i.e. bootstrap.js)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Vocab

class

• everything uses class. Even h1 can be class="h1". These have default styles in the browser, but Bootstrap overrides them with Bootstrap styles.

data-

custom css attributes

jquery aka $

$(___)

a href="#"

Responsive

• xs (for phones)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)
• Example: visible-xs
• Example:

<div class="embed-responsive embed-responsive-16by9">
    <iframe src=" src="https://player.vimeo.com/video/51046404?byline=0&portrait=0" class="embed-item"></iframe>
</div>

Grid System: 12

• container --> padding everything looks nice with margins
• container-fluid: width changes fluidly, vs regular container that has fixed width for each screen size
• row
• col

default text stylings

lead, small, jumbotron, kbd, etc

.active .success .info .warning .danger

.text-muted, .text-primary, .text-success, .text-info, .text-warning, and .text-danger

.bg-primary, .bg-success, bg-info, bg-warning, and .bg-danger

Bootstrap Typography
Bootstrap CSS Helpers

Images

.img-rounded .img-circle

.img-responsive

Toast Messages (Alerts)

    <div class="alert alert-danger fade in">
      <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
      <strong>Hello world!</strong> Bootstrap is here.
    </div>

Buttons

• .btn-default
• .btn-primary
• .btn-success
• .btn-info
• .btn-warning
• .btn-danger
• .btn-link
• .btn-lg
• .btn-md
• .btn-sm
• .btn-xs
• btn-block
• active disabled
• btn-group-vertical
• btn-group-lg

Glyphicon

Glyphicons

Collapse

• data-target="#id"
• that ID needs to have class="collapse", starts hidden

Navbar

• .navbar-fixed-top

    button:
        data-toggle="collapse"
        data-target="#myNavbar"

Change when the hamburger shows up:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

Modals, Tooltips & Popovers

• tooltips are text, popovers can have html
• show additional info without navigating away from page
• example: modal that shows user info when you mouseover their profile

data-toggle="tooltip" title="Meow"

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});

http://www.w3schools.com/bootstrap/bootstrap_ref_js_popover.asp

Dropdowns

data-toggle

• dropdown js events

Themes / Templates

• Bootstrap Material Design - GitHub
• http://startbootstrap.com/ <-- themes

Customization: Change color scheme, fontface, specific items

1. Override CSS
   • example: override btn with border-radius
   • This is how Bootstrap's own website works
   • Pros:
     • Easy workflow
   • Cons:
     • uncessary filesize
2. Customize the download:
   • Choose which components: http://getbootstrap.com/customize/
   • Add CSS here
   • Live Customizers
     • http://bootstrap-live-customizer.com/
     • http://bootswatchr.com/ - by variable
     • Image to Theme
     • Glyphicons customizer: https://icomoon.io/

• Less compiles CSS with variables

• Download LESS

• http://bootswatch.com/ themes