Uki.life

12.05.2017.

Friday.

Today we learned about Bootstrap.

⟹Bootstrap

Bootstrap is the most popular HTML,CSS and Javascript framework for developing responsive, mobile-first web sites.

Bootstrap is a free front-end framework for faster and easier web development

Bootstrap includes HTML and CSS based design templates for
typography
forms
buttons
tables
navigation
modals
image
carousels
and many other
as well as optional JavaScript plugins

Bootstrap also gives you the ability to easily create responsive designs.

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub.
In June 2014 Bootstrap was the no.1 project on GitHub.

⟹Why Use Bootstrap?

Advantages of Bootstrap

Easy to use:

Anybody with just basic knowledge of HTML and CSS can start using Bootstrap

Responsive features:

Bootstrap's responsive CSS adjusts to phones, tablets, and desktops

Mobile-first approach:

In Bootstrap 3, mobile-first styles are part of the core framework

Browser compatibility:

Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)

⟹Grid Classes

The Bootstrap grid system has four classes:

xs (for phones)
sm(for tablets)
md(for destops)
lg(for larger destops)

Example for grid class coding:

⟹<h1> - <h6>

This is used for headings.

⟹<small>

In Bootstrap the HTML <small> element is used to create a lighter, secondary text in any heading.

⟹<mark>

Bootstrap will style the HTML <mark> element in the following way

⟹<abbr>

Bootstrap will style the HTML <abbr> element in the following way

WHO

⟹<blockquote>

⟹<dl>

The dl element indicates a description list:

Coffee: - black hot drink
Milk: - white cold drink

⟹Description Lists

<code>span</code>, <code>section</code>, and <code>div</code>
HTML elements: span, section, and div defines a section in a document.

⟹<kbd>

Keyboard Inputs.
To indicate input that is typically entered via the keyboard, use the kbd element:
Use ctrl + p to open the Print dialog box.

⟹<pre>

For multiple lines of code, use the pre element.

⟹Bootstrap Tables

➡Bootstrap Basic Table

<table class="table">

➡Striped Rows

<table class="table">

➡Bordered Table

<table class="table table-bordered">

➡Hover Rows

<table class="table table-hover">

➡Condensed Table

<table class="table table-condensed">

➡Contextual Classes

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>def@somemail.com</td>
      </tr>
      <tr class="success">
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="danger">
        <td>Danger</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="info">
        <td>Info</td>
        <td>july@example.com</td>
          </tbody>
</table>

⟹Bootstrap Images

➡Rounded Corners

<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">

➡Circle

<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">

➡Thumbnail

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">

➡Responsive Images

<img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460" height="345">
</div>

➡Responsive Embeds

<iframe class="embed-responsive-item" src="..."></iframe>

⟹Creating a Jumbotron

➡A jumbotron indicates a big box for calling extra attention to some special content or information.

➡A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.

➡Tip:
Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.
Use a <div> element with class .jumbotron to create a jumbotron:

⟹Bootstrap Wells

<div class="well">
<div class="well well-sm">Small Well</div>
<div class="well well-lg">Large Well</div>

⟹Bootstrap Alerts

⟹Bootstrap Buttons

➡Button Styles

⇒.btn
⇒.btn-default
⇒.btn-primary
⇒.btn-infobtn-warning
⇒.btn-danger
⇒.btn-link

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

⟹Bootstrap Glyphicons

➡Glyphicons can be used in text,
⇒buttons,
⇒toolbars,
⇒navigation,
⇒forms,
etc.

➡Here are some examples of glyphicons:

⇒Envelope glyphicon
⇒Print glyphicon
⇒Search glyphicon
⇒Download glyphicon

<a href="#"><span class="glyphicon glyphicon-envelope"></span></a>

⟹Bootstrap Badges and Labels

<div class="container">
<h2>Badges on Buttons</h2>
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
<button type="button" class="btn btn-success">Success <span class="badge">3</span></button>
<button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button>
</div>

⟹Bootstrap Progress Bars

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      <span class="sr-only">70% Complete</span>
    </div>
</div>

➡Colored Progress Bars

Contextual classes are used to provide "meaning through colors".
The contextual classes that can be used with progress bars are:

progress-bar-success
progress-bar-info
progress-bar-warning
progress-bar-danger

➡Striped Progress Bars

<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>

➡Animated Progress Bar

<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>

➡Stacked Progress Bars

⟹Bootstrap Pagination

⟹Breadcrumbs

<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul>

⟹Bootstrap Pager

⟹Bootstrap List Groups

<ul class="list-group">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
</ul>

⟹Bootstrap Panels

<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
</div>

<div class="panel panel-default">
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>

⟹Bootstrap Dropdowns

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
</ul>
</div>

⟹Bootstrap Collapse

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

⟹Bootstrap Tabs and Pills

Tabs are created with <ul class="nav nav-tabs">:

Tip:
Also mark the current page with <li class="active">.

Pills are created with <ul class="nav nav-pills">. Also mark the current page with <li class="active">:

⟹Bootstrap Navigation Bar

Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page:
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with <nav class="navbar navbar-default">.

<nav class="navbar navbar-default">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
</div>
</nav>

⟹Bootstrap Forms

➡Bootstrap's Default Settings

Form controls automatically receive some global styling with Bootstrap:
All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.

➡Bootstrap Form Layouts

Bootstrap provides three types of form layouts:

Vertical form(this is default)
Horizontal
Inline form

➡Standard rules for all three form layouts:

⇒Wrap labels and forms controls in <div class="form-group">(needed for optimum speacing)
⇒Add class .form-control to all textual <input>, <textarea>, and <select> elements.

A horizontal form means that the labels are aligned next to the input field (horizontal) on large and medium screens. On small screens (767px and below), it will transform to a vertical form (labels are placed on top of each input).
Additional rules for a horizontal form:

⇒Add class .form -horizontal to the <form> element
⇒Add class .control-label to all <label> elements

Tip:
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.
The following example creates a horizontal form with two input fields, one checkbox, and one submit button.

......................................................................