# Twitter Bootstrap

Nivå: intermediate | Målgrupp: Web programmerare | Förkunskaper: Praktiska kunskaper i CSS och HTML
https://www.ribomation.se/programmerings-kurser/bootstrap/

Twitter Bootstrap är ett kolossalt flexibelt CSS ramverk för att bygga moderna web applikationer
som både ser snygga ut och är responsiva, dvs anpassar sig till olika skärmstorlekar.
Den här kursen lär dig att bemästra Bootstrap: Från grunderna till expertis.

Välkommen till vår 2-dagars kurs "Bemästra Bootstrap: Från grunderna till expertis". På denna kurs kommer du att
vägledas från att förstå grunderna i HTML och CSS till att utveckla responsiva och visuellt attraktiva webbapplikationer
med hjälp av Bootstrap.

Vi börjar med grunderna i HTML, CSS, Flexbox och Grid layout, samt en snabb titt på responsiv design och media queries.
Därefter dyker vi djupare in i Bootstrap, ett ramverk som förenklar och snabbar upp din webbdesign. Vi går genom
typografi, sidlayouter och praktiska komponenter; allt från enklare saker som knappar och emblem till mer komplexa såsom
dragspel, modaler och karuseller.

Vi tar också upp Bootstrap-formulär och deras tillstånd, plus validering för att ge dig de färdigheter som behövs för
att skapa anpassningsbara inmatningsalternativ som fungerar i harmoni med dina applikationer.

Slutligen kommer vi att lära dig hur du kan anpassa Bootstrap för att sätta din prägel på dina projekt. Här får du lära
dig om teman, hur man ställer in Dark Mode, CSS-variabler samt avancerade ämnen som att återbygga Bootstrap med
Sass/SCSS.

Gå med oss för att dyka in i informativa sessioner, praktiska exempel och verkliga scenarier. Den här kursen är steget
mellan att vara nybörjare och att behärska Bootstrap för att skapa snygga, effektiva och avancerade webbdesign.

- Understand the fundamental concepts and syntax of HTML and CSS.
- Dive into the principles of Flexbox and Grid layouts.
- Discover the power of media queries and responsive design.
- Grasp the attributes, architecture and installation of Bootstrap.
- Master Bootstrap's typography and learn to design pages using the 12-column grid system.
- Explore different Bootstrap components from simple buttons and badges to complex accordions and carousels.
- Gain insights into how JavaScript can augment Bootstrap components.
- Dissect the design strategies behind Flowing, Responsive, and Mobile-First Design in Bootstrap.
- Learn to construct different forms and form fields in Bootstrap.
- Study form validation, learning the differences between Bootstrap and native validation.
- Dive into the customization of Bootstrap's look and feel.
- Get into Bootstrap theming, implementing dark mode, and using CSS variables.
- Gain an understanding of SASS/SCSS for more complex Bootstrap customization.
- Learn the process and benefit of rebuilding Bootstrap.
- Understand the importance of free and paid themes and what to consider when choosing one.

### Basic Styling
Here we quickly discuss topics you must have an understanding of in order to
utilize Bootstrap.

#### HTML
- Basic syntax
- Page document
- Headings & paragraphs
- Divs & spans
- Block vs. inline vs. inline-blocks
- White space, wrapping and pre-tags
- Lists
- Links
- Images & pictures
- Tables
- Presentational vs. semantic tags
- Common attributes
- Form elements
- Document header tags
- Meta tags
- Linking to stylesheet files
- Linking to script files

#### CSS
- Basic syntax
- Selectors & combinators
- Pseudo classes & elements
- Variables
- Size units
- Text properties
- Text formats & transforms
- Justifications and columnar text
- Margins & paddings
- Borders & shadows
- Font categories
- Font-size relative units
- Ems vs. rems
- Colour properties
- Colour expressions
- RGB vs. HSL
- Opacity
- Understanding viewport units

#### Flexbox Layout
- What is flexbox?
- Why do I need to understand flex, when I'm planning to use Bootstrap?
- Terminology
- Properties
- Direction
- Justify content
- Align items
- Wrapping

#### Grid Layout
- What is grid layout?
- How does it differ from flex?
- Terminology & anatomy
- Container properties
- Item properties
- Named grid lines
- Named grid areas

#### Device/Media Queries
- What is a media query?
- Query by device type
- Query by device feature
- Operators
- Using mydevice.io
- What is _responsive design_?

### Rudimentary Bootstrap
From now on, we focus on Bootstrap and how ti simplifies website styling.

#### Overview of Twitter Bootstrap
- Mark Otto & Jacob Thornton
- Properties of Bootstrap
- Architecture
- How to install
- Which asset files to use
- Using CDN links
- Downloading asset files
- Using NPM and Vite

#### Typography
- Fonts & sizes
- Headings
- Theme colors
- Text formats
- Text transforms
- Margins & paddings
- Horizontally centered blocks
- Width & height
- Borders
- Shadows
- Responsive images
- Image transforms
- Figures

#### Page Layouts
- Containers
- The 12-column grid system
- Grid sizes
- Understanding breakpoints
- Equal columns
- Scaled columns
- Offsetting columns
- Column wraps
- Some example designs

### Components
Components are reusable snippets of tags and styling and denotes the core of Bootstrap.

#### Simple Components
- What is a Bootstrap component?
- Buttons
- Button groups
- Badges & pills
- Spinners
- Progress
- Placeholders
- Alerts
- Breadcrumbs
- Pagination indicators

#### Composite Components
- Simple cards
- Image cards
- Composite cards
- Collapse
- Dropdowns
- Accordions
- Carousels
- Tabbed panes
- Navbars

#### JavaScript Components
- Modals
- Toasts
- Tooltips
- Popovers

#### Responsive Design
- What is responsive design using Bootstrap?
- Understanding the grid model and breakpoints
- The _mobile first_ design strategy
- How to design a web page to look good both on desktop and on mobile
- How the change the number of columns based on device width
- Using column wrapping for responsive design
- How to deal with text wrapping

### Bootstrap Forms
Here we discuss how to design Bootstrap forms.

#### Simple Form Fields
- Form element structure
- Form control
- Properties
- Text fields
- Special type fields
- Range fields
- Form text
- Input groups
- Floating labels
- Form / field layout

#### Stateful Form Fields
- Checkboxes
- Radio buttons
- Switches
- Dropdown inputs

#### Form validation
- What is validation?
- Bootstrap vs. native validation
- Basic validation configuration
- Supported validation attributes
- CSS validation classes and how to use them
- How to trigger validation

### Customization of Bootstrap
In this section we discuss how customize Bootstrap.

#### Dark Mode
- What is dark mode?
- How to configure light/dark mode
- How to implement a mode switching menu

#### CSS Variables
- How to utilize Bootstrap CSS variables
- Overview of which variables are defined
- Use Bootstrap CSS variables instead of hard-coded values

#### Re-Building Bootstrap
- Why it might be a good idea to rebuild Bootstrap?
- Understanding SASS/SCSS
- How to change the basic theme colors
- Using the SASS CLI to compile Bootstrap
- Using Vite to build Bootstrap

#### Bootstrap Themes
- What are themes?
- Free themes
- Paid themes
- Important aspects to look for before purchasing a theme