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.
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.
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 dagarNivå
IntermediateMålgrupp
Web programmerareFörkunskapskrav
Praktiska kunskaper i CSS och HTMLProgram & 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 och kurstillfälle, rabatteras tillkommande personer med 25%. Ni kan anmäla er till kursen en och en, men uppger då samma företag, så ordnar vi resten. Samtliga deltagare från samma företag ingår då på samma faktura, den första till fullt pris och resterande till rabatterat pris.
Boka din plats på vår fjärrkurs, via Zoom

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

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

Jens Riboe
Senior/Expert Software Developer
5.0 Instructor/Author Rating
50+
Courses Authored1000+
Students Lectured40+
Years ExperienceJag 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