CREATING CUSTOMIZATION WITH JS FRAMEWORK BOOTSTRAP AUTHOR JUAN

CREATING CUSTOMIZATION WITH JS FRAMEWORK: BOOTSTRAP AUTHOR: JUAN DAVILA

• BOOTSTRAP IS A FRONT-END FRAMEWORK, THAT UTILIZESCSS. • BASICALLY, A LARGE STYLESHEET WITH A LOT OF RULES. • JAVASCRIPT COMES WITH CUSTOM JQUERY PLUGINS. • LASTLY, THE MAGIC HAPPENS WITH CONVENTIONS WITH IN THE RIGHT PLACE. STRUCTURED HTML WITH CLASS

REQUIREMENTS • BOOTSTRAP. CSS •  <LINK REL="STYLESHEET" HREF="HTTPS: //MAXCDN. BOOTSTRAPCDN. COM/BOOTST RAP/3. 3. 4/CSS/BOOTSTRAP. MIN. CSS">  <LINK REL="STYLESHEET" HREF="HTTPS: //MAXCDN. BOOTSTRAPCDN. COM/BOOTST RAP/3. 3. 4/CSS/BOOTSTRAP-THEME. MIN. CSS">  <SCRIPT SRC="HTTPS: //MAXCDN. BOOTSTRAPCDN. COM/BOOTSTR AP/3. 3. 4/JS/BOOTSTRAP. MIN. JS"></SCRIPT> • <SCRIPT SRC=" SCRIPTS/JQUERY-1. 8. 3. JS"/> • <SCRIPT SRC="BOOTSTRAP/JS/BOOTSTRAP. JS/>

WHERE TO CUSTOMIZE AND HOW? 1. VISIT HTTP: //GETBOOTSTRAP. COM/CUSTOMIZE/. 2. 3. HTTP: //LESSCSS. ORG/ HTTPS: //WWW. NPMJS. COM/PACKAGE/NPM

DEMO

MANAGING DEPENDENCIES • BOWER BOOTSTRAP/ ├── CSS/ │ ├── BOOTSTRAP. CSS. MAP │ ├── BOOTSTRAP. MIN. CSS │ ├── BOOTSTRAP-THEME. CSS. MAP │ └── 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 └── GLYPHICONS-HALFLINGS-REGULAR. WOFF 2

JAVASCRIPT CAN BE USE TO CHECK STATES • DATA-TOGGLE • ACTIVE AT THE END OF BUTTON ATTRIBUTES

BASIC SETUP 1. DOWNLOAD THE BOOTSTRAP 2. REFERENCE THE CORRECT DEPENDENCIES THAT MAY BE NEEDED. 3. MODIFY ANY CUSTOM STYLES IN THE SITE. CSS, AND INCLUDED IN THE HEAD ELEMENT. 4. IMPORTANT NOTE: OPERATES ON 12 COLUMN GRID LAYOUT

TO BE AWARE OF WHAT? ADVANTAGES DISADVANTAGES • GOOD FOR DEVELOPING FOR RESPONSIVEUI DESIGN. • DIFFICULT TO DIFFERENTIATE FROM OTHER WEBSITES THAT USE BOOTSTRAP. • A LOT OF DOCUMENTATION IS PROVIDED. • CLASS NAMES ARE NOT SPECIFIC ABOUT • REUSABLE BY UTILIZING SEMANTIC CLASS NAMES. • CONVENTION(WITHIN A CLASS THAT CREATES SOMETHING LIKE MAGIC. ) IMPLEMENTATION • WILL NOT ACCEPT 3 RD PARTYJAVASCRIPT LIBRARIES.

INFORMATION • HTTP: //GETBOOTSTRAP. COM/2. 3. 2/