Sökresultat för

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
Twitter Bootstrap

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 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

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

Background

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, vi kommer till er

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

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

Background

CSS för programmerare

CSS

CSS för programmerare

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

Background

Eleventy (11ty)

Eleventy

Eleventy (11ty)

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

Background

JavaScript för programmerare

JavaScript

JavaScript för programmerare

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

Background

Node.js grundkurs

Node.js

Node.js grundkurs

Kurs om hur du utvecklar applikationer i Node.js