Bootstrap

parm530

9/22/2017 - 1:41 PM

Tips for using bootstrap

bs.md

Rendered
Source

Decide how to install BS:

Links on BS page
Using gems for Ruby and placing the required files in the css and js manifest files

Repsonsive Design Code Snippets

For navbar

<header class="navbar-default"> <!--or navbar-inverse -->
  <div class="container"> <!-- gives centered look -->
    <nav role="navigation">
    </nav>
  </div>
</header>

Bootstrap Tips

Mobile first! (Already up and running for mobile devices)
BS uses a 12 grid system, in which you can place columns that when added must equal 12 (if a column goes over 12 it will be added on a new line)
- Must be in the following format: container/row/col

<!-- Creates 2 columns -->
<div class="container">
  <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
  </div>
</div>

Never nest containers within containers!
You can specify other sets of col in the div class. These sets will denote how to size the element when the screen is resized. For example, medium screen
Bootstrap requires a containing element to wrap content and house the grid system:
- .container: for a responsive fixed width
- .container-fluid: to span the entire width of the viewport

Bootstrap Code Snippets

**Proper rendering and zooming ** when using bootstrap

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

Center li's in the navbar:

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

Vertical Alignment of text spanning multiple lines

// container with the following styles:
.container {
  width: _px; // fixed height in pixels
  padding: _px // add padding
  line-height: _px; // need to play around with this number
}

// child of the container:
.container < some_element {
  display: inline-block; // really important
  line-height: _px; // again, play around with this value
}

Center an image in a div using bootstrap's center-block's class:
- img-responsive is used to make the image shrink and grow proportionally to it's container
- Make sure the parent container has a fluid width (not fixed with px but with %)

<div>
  <img class="img-responsive center-block" />
</div>

Push and pull columns

  <div class="col-sm-4">col 1</div>
  <div class="col-sm-8">col 2</div>
  
  <div class="col-sm-4 col-xs-push-8">col 1</div>
  <div class="col-sm-8 col-xs-pull-4">col 2</div>

col 1 will span 4 column widths while col 2 spans 8.
In order to switch the 2 columns, you need col 1 to push the number of columns that col 2 occupy and col 2 needs to pull the number of columns that col 1 occupy.
The 2nd part of the code will show both columns swap on xs device screen widths.

NAVBAR EXPLAINED

To make the navbar accessible, make sure to use <nav> element for the navbar parent element!
- If you plan to use another generic element as the nav parent (for example, a <div>, make sure to add role=navigation to it!
BS's navbar consists of three main components:
- Navbar Container
  - BS navbar uses .container-fluid by default (which is included as <nav class="container-fluid">
    - You can use .container if you prefer
- Navbar Header
  - Navbar Brand
    - Usually an <a> tag with an image and is given a .navbar-brand, to represent your brand
```
<a href="#" class="navbar-brand>
  <img src=...>
</a>
```
  - Navbar Toggle Button
    - Handles collapsing the navbar content on mobile screens (the contents of what you place in here will be hidden on mobile screens (screens larger then 768px))
    - The button itself is hiden on screens larger than 768px! (Due to the class navbar-toggled)
    - The only thing visible will be the brand and a toggle button
    - Button properties:
      - .navbar-toggle: defines the button.
      - .collapsed: also, defines the button.
      - data-toggle="collapse": tells JS that this is what controls the collapsing behavior.
      - data-target="#": contains the id of the box that contains the hidden components.
      - aria-expanded=false: defines the initial state of the hidden component (false: hidden, true: visible).
- Navbar Collapse
  - is the component or container (<div>) that wraps navbar menu, navbar buttons, forms, ..etc (wrapping all navbar components except .navbar-header )
  - is defined by 2 classes: .collapse and .navbar-collapse
  - contains the id that is used by the data-target option for the navbar toggle button.
  - Navbar Menu
    - Element that wraps the navbar links, usually a <ul>!
      - Contains the classes .nav and .navbar-nav
    - You can also include a sub-menu by attaching another <ul> with a class of .dropdown-menu within the <li>. Give this <li> a class of .dropdown
      - should contain a child <a> element that contains the following classes:
        
        .dropdown-toggle: responsible for toggling the dropdown
        
        aria-haspopup="true": indicates that there is a sub menu for this element!
        
        aria-expanded="false"
        
        data-toggle="dropdown"
      - Followed by the <ul> that contains the list, which will contain the class of .dropdown-menu

<nav class="navbar navbar-default navbar-fixed-top">
    <!-- Navbar Container -->
    <div class="container">

        <!-- Navbar Header [contains both toggle button and navbar brand] -->
        <div class="navbar-header">
            <!-- Toggle Button [handles opening navbar components on mobile screens]-->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#exampleNavComponents" aria-expanded"false">
                <i class="glyphicon glyphicon-align-center"></i>
            </button>

            <!-- Navbar Brand -->
            <a href="#" class="navbar-brand">
                Bootstrap Navbar
            </a>
        </div>


        <!-- Navbar Collapse [contains navbar components such as navbar menu and forms ] -->
        <div class="collapse navbar-collapse" id="exampleNavComponents">

            <!-- Navbar Menu -->
            <ul class="nav navbar-nav navbar-right">
                <li class="active">
                    <a href="#">Page 1</a>
                </li>
                <li>
                    <a href="#">Page 2</a>
                </li>
                <li>
                    <a href="#">Page 3</a>
                </li>
                <!-- Navbar link with a dropdown menu -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>

            <!-- Navbar Form -->
            <form action="#" class="navbar-form">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>

            <!-- Navbar Button -->
            <button type="button" class="btn btn-default navbar-btn navbar-right">Sign in</button>

            <!-- Navbar Text -->
             <p class="navbar-text">Signed in as Mark Otto</p>

        </div>
    </div>
</nav>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Bootstrap

Decide how to install BS:

Repsonsive Design Code Snippets

Bootstrap Tips

Bootstrap Code Snippets

NAVBAR EXPLAINED