Boostrap basics – bootstrap/css – bootstrap/js

View Github Repository Open presentation in a new window

lozadaOmr

See all presentation from lozadaOmr

Boostrap basics – bootstrap/css – bootstrap/js

0 0

bootstrap-basics

Short presentation about Bootstrap using reveal.js

On Github lozadaOmr / bootstrap-basics

Boostrap basics

Get the latest build

http://getbootstrap.com

File Structure 

							
								/bootstrap
									├── /css
									│   ├── bootstrap.css
									│   ├── bootstrap.min.css
									│   ├── bootstrap-theme.css
									│   └── bootstrap-theme.min.css
									├── /js
									│   ├── bootstrap.js
									│   └── bootstrap.min.js
									└── /fonts
									    ├── glyphicons-halflings-regular.eot
									    ├── glyphicons-halflings-regular.svg
									    ├── glyphicons-halflings-regular.ttf
									    └── glyphicons-halflings-regular.woff

bootstrap/css

bootstrap.css
bootstrap.min.css
bootstrap-theme.css
bootstra-theme.min.css

Notes on Bootstrap CSS

Basically bootstrap.css is the same as bootstrap.min.css 
And bootstrap-theme.css is also the same as bootstrap-theme.min.css

Difference

all .min.css are just mini-fied version of its corresponding .css
this is because mini-fied files are smaller in file size, loads faster
the same goes with .min.js and .js

bootstrap/js

bootstrap.js
bootstrap.min.js

Notes on JS

bootstrap.js is dependent on jQuery.js
and
should be loaded before bootstrap.js

HTML & CSS

an overview

What is HTML?

Hyper Text MarkUp Language
it is a MarkUp Language used in displaying structure and content                                                - Abra

What should HTML contain?

CONTENT
not styling

What is CSS?

CSS or Casacade Style Sheets is used in presenting the content or HTML.
in other words,
"nagbibigay kulay sa HTML"             - Bob Ong

Basic HTML syntax

											<!doctype html>
											<html lang="en">
											<head>
											    <meta charset="UTF-8">
											    <title>Document</title>
											</head>
											<body>
											    HELLO WORLD!
											</body>
											</html>

Take note

  • Indent properly
  • Close your Tags!
  • Use the correct tag
  • Please read the previous notes.

												 <div>
												     <span> 
												          CONTENT 
												     </span>
												 </div>
<opening tag> CONTENT </closing tag>

Parts of tag

<TAG SELECTOR>

Example

<div class="bootstrap"> Content </div>

Basic CSS Syntax

											   .header { 
											       height:auto;
											       margin:auto;
											   }
											   #footer {
											       color:azure;
											       padding:10px;
											   }

Syntax Explained

selector(s) {
												properties:value;
											}

3 Basic Selectors

  • HTML tag selector
  • Class selector
  • ID selector

HTML tag selector

this targets all indicated HTML tag, the example below will give all <form> a background color of red 
											form { 
												    background-color: red;
											}

Class selector

the class selector will only affect tags that have the class
using class selector, you declare first with a dot '.'
											.class-name {
											    properties : value;
											}

this selector will target all elements that has a class="header" and change the font to red
												.header {
												    font-color: red;
												}

ID Selector

like the class selector, ID selector is the same it will effect only tag with indicated ID name.
ID are declared using the hash-sign '#'
the code below will give all elements with the ID="sidebar1" a height of 90px
												#sidebar1 {
												    height:90px;
										}

Class vs ID

NOTE when to use class or ID
ID should be UNIQUE and occur only once
Class can be used as many times

Values

height, background-color, font-color etc...
Use this as a reference

Sample

create an html file, save it as sample.html 
												<!doctype html>
												<html lang="en">
												<head>
												    <meta charset="UTF-8">
												    <title>Sample</title>
												    <linkrel="stylesheet" href="css/styles.css">
												</head>
												<body>
												<div class="foobar">
												    <p id="col1">
												        THIS IS COL1
												    </p>
												</div>
												<div class="foobar">
												    <p id="col2">
												        THIS IS COL2
												    </p>
												</div>
												</body>
												</html>

create a CSS file name it styles.css and save it inside CSS folder
														#col1 {
														     background-color: blue;
														     width:150px;
														     height:150px;
													}
													#col2 {
													     background-color:red;
													     width:90px;
													     height:90px;
												}
												.foobar {
												    color:white;
												    background-color:yellow;

												    padding:10px 10px;

												    height:200px;
												    width:200px;
											}

Example

<div class= "parent">
												<div class= "child eldest-child parent"> 
												    <p id= "eldest-grand-child" class= "child grand-child eldest-child"> </p>
												    <p id= "youngest-grand-child" class= "child grand-child youngest-child" </p>  
									</div> 
									<div class= "child middle-child"> </div> 
									<div class= "child youngest-child"> </div> 
</div>

Other Ways to use CSS selectors

												div.parent {     
												    color:green 
												}; 

												.child {     
												    font-size: 4px 
												};

												div.parent .child .grand-child {    
												    height:40px
												};
												div.parent .child #youngest-child {    
												    height: 90px;
												}
												.parent > .youngest-child {
												    height:100px;
												}

Additional Reference

Bootstrap 101

Golden Rule

FOLLOW THE DOCUMENTATION SYNTAX

Basic Page

Go and create a index.html
visit this site for the code

Things to know

Bootstrap has a maximum of 12 COLUMNS per ROW
if you declare 13 COLUMNS only 12 will appear on the first ROW
the 13th column will appear on another row

END