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 • <!-- LATEST COMPILED AND MINIFIED CSS --> <LINK REL="STYLESHEET" HREF="HTTPS: //MAXCDN. BOOTSTRAPCDN. COM/BOOTST RAP/3. 3. 4/CSS/BOOTSTRAP. MIN. CSS"> <!-- OPTIONAL THEME --> <LINK REL="STYLESHEET" HREF="HTTPS: //MAXCDN. BOOTSTRAPCDN. COM/BOOTST RAP/3. 3. 4/CSS/BOOTSTRAP-THEME. MIN. CSS"> <!-- LATEST COMPILED AND MINIFIED JAVASCRIPT --> <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/
- Slides: 10