Kurs om
Twitter 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.

2 dagar Intermediate Bootstrap CSS Web

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.

Detta får du lära dig på kursen

Här är ett sammandrag i punktform av vad du får lära dig på kursen. Eftersom kursmaterialet är författat på engelska, så återger vi sammandraget också på engelska.

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.

Kursfakta

Här finner du alla detaljer om kursen.

Kursnamn
Twitter Bootstrap
Twitter Bootstrap (eng.)
Varaktighet
2 dagar
Nivå
Intermediate
Målgrupp
Web programmerare
Förkunskapskrav
Praktiska kunskaper i CSS och HTML
Program & Verktyg
- Twitter Bootstrap version 5.3 Node.js, NPM, NPX
- MS Visual Code || JetBrains WebStorm
- Chrome || Firefox || Edge
- Vite
Publicerad
1 augusti 2024

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

Här ser du vilka kursdatum som är tillgängliga. Klicka på en av datumknapparna för att anmäla dig till ett kurstillfälle. På kursen pratar läraren svenska, medan vårt kursmaterial alltid är författat på engelska.

Missa inte vår samfaktureringsrabatt! Är ni fler personer från samma företag/organisation som går på samma kurs, rabatteras tillkommande personer med 25%. Ni anmäler er till kursen en och en, men uppger samma företag, så ordnar vi resten. Samtliga deltagare från samma företag ingår på samma faktura, den första till fullt pris och resterande till rabatterat pris.

Datum för klassrumskurser

Du sitter bekvämt i ett av våra klassrum. I priset ingår tryckt kursmaterial, samt kaffe/te med smörgås på förmiddagen och kaffe/te med bulle på eftermiddagen.

Pris: 14 000 kr + moms

Hoppsan då 😳
Just nu finns det inga datum tillgängliga. Titta förbi om några dagar eller kontakta oss och be oss lägga upp fler kursdatum.

Datum för fjärrkurser

Du sitter bekvämt framför datorn och deltar i kursen via internet. Vi använder programvaran Zoom för alla våra fjärrkurser. I priset ingår kursmaterial som PDF.

Pris: 10 000 kr + moms

Bootstrap

2 dagar

Kursen vänder sig till web programmerare och utgår från att deltagarna har praktiska kunskaper i css och html.

Företagsanpassad kurs

Om ni är tre eller fler personer från samma företag eller organisation, kan ni beställa en företagsanpassad kurs. Då håller vi kursen på ett datum som passar er. Antingen på plats i era lokaler eller som en fjärrkurs. Vi kan också hålla den muntliga framställningen på engelska.

Kontakta oss för en offert

Företagsanpassad Kurs

Jens Riboe

Senior/Expert Software Developer

5.0 Instructor/Author Rating

50+

Courses Authored

1000+

Students Lectured

40+

Years Experience

Jag har programmerat sedan början på 1980-talet i en stor mängd olika programspråk och på olika plattformar. Har jobbat på både stora och små företag, både etablerade och startups, samt både inom och utom Sverige. Att skriva (elegant) programkod är det bästa jag vet. Denna erfarenhet och passion är den centrala komponenten i våra kurser. Något som gör oss unika på marknaden och att våra kunder återkommer år efter år för nya och fördjupade kunskaper.

View LinkedIn Profile

Relaterade Kurser

CSS

CSS för programmerare

Kurs för programmerare om hur du tillämpar modern CSS i webb-applikationer

2 dagar Beginner

Eleventy

Eleventy (11ty)

Kurs om hur du bygger en modern statisk webbplats med Eleventy (11ty)

3 dagar Intermediate

JavaScript

JavaScript för programmerare

Kurs om hur du programmerar i Modern JavaScript, dvs ES2015 och senare

3 dagar Beginner

Node.js

Node.js grundkurs

Kurs om hur du utvecklar applikationer i Node.js