MyFirstGrid

My first Grid Made In Bootstrap 3 We use: -Bootstrap 3.3.7
-JQuery 3.2.1
-Our own styles.css
Our tree is :

header > container

container >
-section(Row)>
-article [col 9]
-aside [col 3]

-div (Row)>
-div [col 3]
-div [col 3]
-div [col 3]
-div [col 3]

footer > container

We manipulate size of columns to differents size screen by adding a class="col-xs-12 col-sm-4 col-md-3" and saying how we want values displayed for extra small(mobile), small(tablet),medium(tablet), and large by default taking last col value in this case md-3 so col-lg-3 😃

text html

to text..

text-center|justify|left|right
text-muted|primary|info|succes|warning|danger
text-lowecase|uppercase|capitalize
to text background color:
bg-primary|info|succes|warning|danger
to remark text
b
strong
mark
u
code
pre
small
blockquote
Shorcut with Emmet:
Making a row with three columns with size 4 and each column has 6 child paragraphs
div.row>div.col-md-43>p6

Making forms in Bootstrap

Form 1:Normal Form

This is my first form made in bootstrap :

For forms we have an special class: form-control wich is applied to inputs of type:

text
password
datetime
month
week
email
url
search
tel
color

We have another special class form-group To make groups formed generally by [label,input] tags this serves to group tags and make a seperation beetween different fields of the form Our first form look like:

Form 2:Inline Form

this is my first inline form We add a class to form tag
form-inline
this will make our form inline and in past we have form-group class now we use
input-group
to stick by using
input-group-addon
an @ to a email field so our second form would like this.

Form 3:Horizontal Form

This is about making our custom responsive form by giving size of columns to the labels and inputs so we can customize how fields would look when is a mobile or a tablet or a desktop we make this possible by adding a class to labels called

class="control-label col-md-10"

and wrapping in a div our inputs and making that div to have a class calle

div class="col-md-10"

with our customize size just like we did in our grids... so our form-horizontal would look like this:

Important note: to wrap a tag in a div we use Emmet shorcut:

Ctrl + Shift+ g

The most important or relevants classes in forms are:

form-inline
form-horizontal
form-group
form-control
input-group
input-group-addon
control-label col-md-10

My first Buttons on Bootsrap

There are 7 types of buttons:default,info,primary,succes,warning,danger,link
With 4 different sizes :xsm (Extra Small), sm(Small),md(medium),lg(Large)

Some interesting classes are:

btn-block [ocupa todo el espacio de la columna donde este]
active [agrega el tan famoso efecto active a los botones]
disabled [agrega el efecto que inhabilita el boton]

We can implement a button in 3 different ways
-Button Tag
-Anchor Tag
-Input Type=Button

Our buttons are beautiful: 😃

First Images on bootstrap

For images we have 4 important classes

img-responsive
img-rounded
img-circle
img-thumbnail

Our sample of RESPONSIVE images:

Responsive Utilities

Classes for hide and show a div or an element

visible-lg [hace el contenido visible solo en extra pequeño]
visible-md [hace el contenido visible solo en extra pequeño]
hidden-sm [contenido oculto para dispositivo pequeño]
hidden-xs [contenido oculto para dispositivo extra pequeños]

By default our contents are show on Block so

-visible-md-inline [for making inline]
-visible-md-block [spec that will be block]

if we make

aside class="visible-lg visible-md col-xs-12 col-sm-4 col-md-3"

We can only see sidebar in lg and md sizes like this:

but if the screen is sm (small) or xsm(Extra small) it will not be display aside it will just disappear like this

Using ICONS on Bootstrap

We can use icons in different components like a button,paragraph,headers etc. --->For using an icon we need to make an span element inside the tag we want and the span need to have a class with the name of that icon:

span class="glyphicon glyphicon-asterisk"

span is a child of an header tag in the next example:

Dropdown Buttons

Making dropdown button is interesting because it will use javascript fucntionality behind the scenes

for making a dropdown menu we need:
1.- Wrap a trigger[button] and a list menu in a div with .dropdown
2.- To say that a button is a dropdown button we add .dropdown-toggle
3.- To say a menu is a dropdown-menu we add .dropdown-menu
4.- To link button + menu we add an id to a button then in menu we point to that id

We use a special icon called caret, in our menu we can have: .dropdown-header wich is a header and also a .divider wich is a divider and also we can add .disabled class to an element li of our ul a.k.a menu

Input Groups

We have already make an input-group in forms but this are some other examples about it: So we say:

An addon is like an icon:
We need a span implementing input-group-addon or input-group-btn
but first
For making input-groups we need: 
form-group
and as a child 
input-group
so we can stick a caracter to an input
in resume

.form-group : .input-group : span.input-group-addon

Nav Tab and Nav Pills

First of all for making our first navbar we need to know what are nav tabs and nav pills: so:

For desmystifying nav tabs and nav pills we need to say that are just unordered list a.k.a ul implementing class="nav nav-tab" or class="nav nav-pills" respectively

But we can make those navs stacked, or justified, and also they can have a dropdown.

Nav tabs and Nav Pills are just simplified versions of Navbars

Navbar!!!!!!!!!!!!

This is like the most beautiful part of bootstrap c:

Essential idea about navabars is that a navbar is a unordered list
so
Make an ul with anchors as li
Add to ul the class .nav navbar-nav
Wrap that ul in a nav with class navbar navbar-default
make a div with class navbar-header
inside of div.navbar-header put toggle button and brand name
Wrap ul in a .collapse navbar-collapse and add id="{id on toggle button}"

and..
if you need a form you need to tell that will be inline so wrap that form in .navbar-form
if you need a button put .navbar-btn
if you need text put .navbar-text

If you need aligments put navbar-left or .navbar-right in a separate ul

You can use .navbar-fixed-top or navbar-static-top,
but first make content of the nav inside a container or container-fluid

:D

And our navbar would look like this:

Breadcrumbs

It is curious that in breadcrumbs we put ordered list [ol] instead unordered list {ul}

And breadcrums are just ordered list with .breadcrumb 😃

Pagination

Guess What, Pagination are just ul with .pagination with different sizes

Labels

If we need some kind of flag to our elements we have label tag

Badges

For notifications features we have badges

it is like an icon or a label we put a span

Jumbotron

Jumbotron is Like a giant box

An iteresting class .page-header to use with headers

It kinds remember me my first CV Thats why I love it!! :D

Thumbnails

An image that adapt to size of columns , adjusts size of an image Wrap an image in a div or an anchor with class="thumbnail" If you want to capture information use class="caption"

Alerts

Alerts are panels with a info of something that user has done Use class="alert alert-success" on a div if you wanna close that you use a button with a classs="close" and a data-dismiss="alert" attr and text put caracter times for the cross

Progress

We use a progressbar to track a process by a percentage And for that we make a div with .progress and also insdide another div with .progress-bar inside that div the value of percentage of that process running we can also use .progress-bar-success .progress-bar-striped active

List Groups

This is like most featured used because of utility

In a ul .list-group an in li or a .list-group-item and ... magic is done ;)

Media object

A class to use to comments or align an image with a text use a div .media inside use div .media-left to put an image use div .media-body to put text

if you want to nest put a new div .media insise .media-body

Panels

Panels are so good in every project you can use them :)
You can use .panel.panel-default and inside of it .panel-heading .panel-body .panel-footer

Modals

Modals are pop ups

modal.fade>.modal-dialog>.modal-content then .modal-content>.modal-header .modal-content>.modal-body .modal-content>.modal-footer

ScrollSpy

Use data-spy="scroll" data-target="#iden" on body tag where iden is the ul and done :)

Collapse

A common feature This are just a .panel-group with .panel.panel-default childs and every .panel-default we separate his .panel-body
we wrap that .panel-body in a class="id="collapse1" class="panel-collapse collapse in" for making it collapsible and in the .panel-title we use href="#collapse1" data-toggle="collapse" data-parent="#acordeon" to make point to the .panel-body and display/non-display it

Slideshow

Slideshows are just magic

For carousels we have a lot of classes but the main classes are .carousel slide
.carousel-indicators , .carousel carousel-inner , .carousel-control.left .item and .carousel-caption

SeniorFlacko/MyFirstGrid