Mastering Bootstrap: A Beginner's Guide (Mastering Computer Science)

Cover
Half Title
Series Page
Title Page
Copyright Page
Table of Contents
Mastering Computer Science Series Preface
About the Editor
Chapter 1 Introduction to Bootstrap
	Introduction
	What Is Bootstrap?
	Advantages and Disadvantages
		Advantages
		Disadvantages
	Benefits over Other CSS Frameworks
	Conclusion
Chapter 2 Getting Started
	Download and Usage
		Link to a CDN
		Bootstrap V5.1 CDN
		Use a Local Copy of Bootstrap
		Install with Bower
		Install with npm
		Install with Composer
	Supported Browser and Devices
		Mobile Devices
		Desktop Browsers
		Modals and Dropdowns on Mobile
			Overflow and Scrolling
			iOS Text Fields and Scrolling
			Navbar Dropdowns
			Browser Zooming
		Sticky :hover/:focus on iOS
		Printing
		Android Stock Browser
			Select Menu
			Validators
	Use with JavaScript
		Working with Bootstrap with the JavaScript Interface
		Simple Page: Basic Structure
		Components from Bootstrap That Don’t Require Any Custom JavaScript
		Button Methods
		Modal Methods
		Events
		Using Bootstrap Components to Indicate Progress
			Extend the task1_save Function
			Add a Progress Bar
			Task Completion
	Support for RTL
		Required HTML
			Starter Template
			Approach
			Customize from Source
			Custom RTL Values
			Alternate Font Stack
			LTR and RTL at the Same Time
			Edge Class and Known Limitations
			The Breadcrumb Case
	Conclusion
Chapter 3 Customization
	Colors
		All Colors
		Text Colors
		Background Colors
		Links
	Components
	Components
		Accordion
			How It Works
			Example
		Flush
			Accordion Item #1
			Accordion Item #2
			Accordion Item #3
		Always Open
			Accordion Item #1
			Accordion Item #2
			Accordion Item #3
		Alerts
			Examples
			Giving Assistive Technology a Sense of Purpose
		Link Color
		Additional Content
		Icons
		Dismissing
		Sass
			Variables
		Variant mixin
		Loop
		JavaScript Behavior
			Triggers
		Methods
		Events
		Badges
			Examples
		Headings
			Headings
		Buttons
		Positioned
		Background Colors
		Conveying Meaning to Assistive Technologies
		Pill Badges
		Sass
			Variables
			Breadcrumb
		Dividers
		Accessibility
		Sass
			Variables
		Buttons
			Examples
		Giving Assistive Technology a Sense of Purpose
		Disable Text Wrapping
		Button Tags
		Outline Button
		Sizes
		Disabled State
		Link Functionality Caveat
		Block Buttons
		Button Plugin
		Toggle States
		Methods
		Sass
			Variables
		Mixins
		Loops
		Buttons Group
			Example
			Button groups
		Ensure Correct Role and Provide a Label
			Button active groups
		Mixed Style
		Outlined Styles
		Checkbox and Radio Button Groups
		Button Toolbar
		Sizing
		Nesting
		Vertical Variation
		Cards
		About
			Example
		Content Types
			Body
		Tiles, Text, and Links
		Images
		List Groups
		Kitchen Sink
		Header and Footer
			Sizing
			Using Grid Markup
			Using Utilities
			Using Custom CSS:
		Text Alignment
			Navigation
		Images
			Images Caps
		Images Overlays
		Horizontal
		Card Styles
			Background and Color
			Border
			Mixins Utilities
		Card Layout
		Card Groups
		Grid Cards
		Masonry
		Carousel
			How It Works
			Example
			Slides Only
		With Controls
		With Indicators
		With Captions
		Crossfade
		Individual .carousal-item Interval
		Disable Touch Swiping
		Dark Variant
		Custom Transition
		Usage
			Via Data Attributes
			Via JavaScript
		Methods
			Asynchronous Methods and Transitions
		Events
		Close Button
			Example
		Disable State
		White Variant
		Collapse
			How It Works
			Example
		Multiple Targets
		Accessibility
		Sass
			Variables
			Classes
		Usage
		Via Data Attributes
		Via JavaScript
		Options
		Methods
			Asynchronous Transitions and Methods
		Events
		Dropdowns
			Overview
		Accessibility
		Examples
		Single-button
		Sizing
		Dark Dropdowns
		Directions
			RTL
			Drop Up
		Drop Right
		Drop Left
		Menu Items
		Active
		Disable
		Menu Alignment
		Responsive Alignment
		Alignment Options
		Menu Content
			Headers
		Dividers
		Text
		Forms
	Dropdown Options
		Autoclose Behavior
		List Group
			Basic Example
		Active Items
		Disable Items
		Links and Buttons
		Flush
		Numbered
		Horizontal
		Contextual Classes
		With Badges
		Custom Content
		Checkbox and Radios
		JavaScript Behavior
			Using Data Attributes
			Modal
			How It Works
			Examples
		Live Demo
		Static Backdrop
		Scrolling Long Content
		Vertically Centered
		Tooltips and Popovers
		Using the Grid
		Varying Modal Content
		Toggle between Models
		Change Animation
		Remove Animation
			Dynamic Heights
		Accessibility
		Embedding YouTube Videos
		nav and Tabs
		Base nav
		Available Styles
		Horizontal Alignment
			Centered with .justify-content-center
			Right-aligned with .justify-content-end
		Vertical
		Tabs
		Pills
		Fill and Justify
		Working with Flex Utilities
		Regarding Accessibility
		Using Dropdowns
		Tabs with Dropdowns
		Pills with Dropdowns
		navbar
			How It Works
		Supported Content
		Brand
		Text
		Image
		Image and Text
		nav
		Forms
		Text
		Color Schemes
		Containers
		Placement
		Scrolling
		Responsive Behaviors
		Google
		External Content
		Off-canvas
			How It Works
		Examples
			Off-canvas Components
		Live Demo
		Placement
		Backdrop
		Pagination
			Overview
			Working with the Icons
			Disabled and Active States
			Sizing
			Alignment
		Placeholders
		About
			Example
		How It Works
		Width
		Color
		Sizing
		Animation
		Popovers
			Overview
			Example: Enable Popovers Everywhere
			Example: Using Container Option
		Four Directions
		Dismiss on Next Click
		Disable Elements
		Progress
			How It Works
		Labels
		Height
		Backgrounds
		Multiple Bars
		Stripped
		Animated Strips
		Scrollspy
			How It Works
			Example in navbar
		Example with Nested nav
		Example with list-group
		Spinners
		About
		Border Spinner
		Colors
		Growing Spinner
		Alignment
		Margin
		Placement
		Flex
		Floats
		Text Aligns
		Size
		Buttons
		Toasts
			Overview
		Examples
			Basic
			Live
			Translucent
			Stacking
		Custom Content
		Color Schemes
		Placement
		Accessibility
		Tooltips
			Overview
			Example: Enable Tooltips Everywhere
			Example
	CSS Variables
		Basic Usage
		Inheritance of the Custom Properties
		Validity and Values
		The Traditional Way
		Syntax of the var() Function
		How var() Works
			Example
		Advantages of Using var()
			Example
		Browser Support
		CSS var() Function
	Optimization
		Only Download Bootstrap Package You Need
		Select the Source Instead of the Precompiled Download Package
		Make Use of a Proven Client-side Optimization Technique
		Write Lean CSS and JavaScript
		Minify and Concatenate CSS and JavaScript Code
		Watch Out for Your Image File Size
	SASS and Mixins
		File Structure
		Importing
		Variable Defaults
		Maps and Loops
		Modify Map
		Add to a Map
		Remove from the Map
		Required Keys
		Functions
			Colors
			Colors Contrast
		Escape SVG
		Add and Subtract Functions
		Mixins
			Color Schemes
	Conclusion
Chapter 4 Layouts
	Breakpoints
		Core Concepts
		Available Breakpoints
		Media Queries
		Max-width
		Single Breakpoint
		Between Breakpoint
	Containers
		How They Work
		Default Container
		Responsive Container
		Fluid Container
	Grid
		Example
		How It Works
		Grid Options
		Auto-layout Columns
		Equal Width
		Settings One Column Width
		Variable Width Content
		Responsive Classes
			All of the Breakpoints
		Stacked to Horizontal
		Mix and Match
		Row Columns
		Nesting
	Columns and Rows
		How They Work
		Alignment
		Vertical Alignment
		Horizontal Alignment
		Column Wrapping
		Column Breaks
		Reordering
			Order Classes
		Offsetting Columns
			Offsetting Classes
		Margin Utilities
		Stand-alone Column Classes
	Utilities
		Flexbox Options
		Merging and Padding
		Toggle Visibility
	Conclusion
Chapter 5 Working with Content
	Typography
		Global Settings
		Headings
		Customizing Headings
		Display Headings
		Lead
		Inline Text Element
		Abbreviations
		Blockquotes
		Naming a Source
		Alignment
		List
			Unstilled
		Inline
		Description List Alignment
	Images
		Responsive Images
		Images Thumbnails
			Aligning Images
		Picture
	Tables and Figures
		Tables
		Overview
			Bootstrap
		Variants
		Accented tables
			Striped rows
		Hoverable Rows
		Active Tables
	Tables Borders
		Bordered Table
		Table without Borders
		Small Tables
		Vertical Alignment
		Nesting
		How Nesting Works
		Anatomy
			Table Head
			Table Foot
			Captions
		Responsive Tables
		Vertical Clipping/truncation
		Always Responsive
		Breakpoint Specific
		Figures
	Forms
		Overview
		Form Text
	Disabled Form
		Accessibility
		Form Controls
		Sizing
		Disabled
		Read-only
		Read-only Plain Text
		File Input
		Color
		Data Lists
		Select
		Default
		Sizing
		Disabled
	Check and Radio
		Approach
		Checks
		Indeterminate
		Disabled
		Radios
		Disabled
		Switches
		Default (Stacked)
		Inline
		Without Labels
		Toggle Buttons
			Checkbox and Toggle Buttons
			Radio Toggle Buttons
		Outlined Styles
	Range
		Overview
		Disable
		Min and Max
		Steps
	Input Group
		Basic Example
		Wrapping
		Sizing
		Checkbox and Radios
		Multiple Inputs
		Multiple Add-ons
		Button Add-ons
		Button with Dropdowns
		Segmented Buttons
		Custom Forms
		Custom Selects
		Custom File Input
	Floating Labels
		Example
		Text Areas
		Selects
		Layouts
	Conclusion
Chapter 6 Components
	Components
	Accordion
		How It Works
		Example
			Accordion Item #1
			Accordion Item #2
			Accordion Item #3
		Flush
			Accordion Item #1
			Accordion Item #2
			Accordion Item #3
		Always Open
			Accordion Item #1
			Accordion Item #2
			Accordion Item #3
	Alerts
		Examples
		Conveying Meaning to Assistive Technologies
		Link Color
		Additional Content
		Icons
		Dismissing
		Sass
			Variables
		Variant Mixin
		Loop
		JavaScript Behavior
			Triggers
		Methods
		Events
	Badges
		Examples
		Headings
		Buttons
		Positioned
		Background Colors
		Conveying Meaning to Assistive Technologies
		Pill Badges
		Sass
			Variables
	Breadcrumb
		Example
			List with Linked Items
		Dividers
		Accessibility
		Sass
			Variables
	Buttons
		Examples
			Conveying Meaning to the Assistive Technologies
		Disable Text Wrapping
		Button Tags
			Outline Button
			Sizes
		Disabled State
		Link Functionality Caveat
		Block Buttons
		Button Plugin
		Toggle States
		Methods
		Sass
			Variables
		Mixins
		Loops
	Buttons Group
		Example
		Ensure Correct Role and Provide a Label
		Mixed Style
		Outlined Styles
		Checkbox and Radio Button Groups
		Button Toolbar
		Sizing
		Nesting
		Vertical Variation
	Cards
		About
			Example
		Content Types
			Body
			Tiles, Text, and Links
			Images
			List Groups
		Kitchen Sink
		Header and Footer
		Sizing
		Using Grid Markup
		Using Utilities
		Using Custom CSS
		Text Alignment
		Navigation
		Images
			Images Caps
		Image Overlays
		Horizontal
		Card Styles
			Background and Color
			Border
		Mixins Utilities
		Card Layout
		Card Groups
		Grid Cards
		Masnory
	Carousel
		How It Works
			Example
		Slides Only
		With Controls
		With Indicators
		With Captions
		Crossfade
		Individual .carousal-item Interval
		Disable Touch Swiping
		Dark Variant
		Custom Transition
		Usage
			Via Data Attributes
			Via JavaScript
		Options
		Methods
			Asynchronous Transitions and Methods
		Events
	Close Button
		Example
		Disable State
		White Variant
	Collapse
		How It Works
		Example
		Multiple Targets
		Accessibility
		Sass
			Variables
		Classes
		Usage
		Via Data Attributes
		Via JavaScript
		Options
		Methods
			Asynchronous Methods and Transitions
		Events
	Dropdowns
		Overview
		Accessibility
			Examples
		Single Button
		Split Button
		Sizing
		Dark Dropdowns
		Directions
			RTL
		Drop Up
		Drop Right
		Drop Left
		Menu Items
		Active
		Disable
		Menu Alignment
		Responsive Alignment
		Alignment Options
		Menu Content
			Headers
			Dividers
			Text
			Forms
			Dropdown Options
			Autoclose Behavior
	List Group
		Example
		Active Items
		Disable Items
		Links and Buttons
		Flush
		Numbered
		Horizontal
		Contextual Classes
		With Badges
		Custom Content
		Checkbox and Radios
		JavaScript Behavior
		Using Data Attributes
	Modal
		How It Works
			Examples
		Live Demo
		Static Backdrop
		Scrolling Long Content
		Vertically Centered
		Tooltips and Popovers
		Using the Grid
		Varying Modal Content
		Toggle between Modals
		Change Animation
		Remove Animation
		Dynamic Heights
		Accessibility
		Embedding YouTube Videos
	NAV and Tabs
		Base .nav
		Available Styles
		Alignment Horizontally
			Right-aligned with .justify-content-end
			Vertical
		Tabs
		Pills
		Fill and Justify
		Working with the Flex Utilities
		Regarding Accessibility
		Using Dropdowns
		Tabs with Dropdowns
		Pills with Dropdowns
	Navbar
		How It Works
		Supported Content
		Brand
		Text
		Image
		Image and Text
		nav
		Forms
		Text
		Color Schemes
		Containers
		Placement
		Scrolling
		Responsive Behaviors
		Google
		External Content
	Off-canvas
		How Does It Work?
		Examples
			Off-canvas Components
		Live Demo
		Placement
		Backdrop
	Pagination
		Overview
		Working with Icons
		Disable and Active States
		Sizing
		Alignment
	Placeholders
		About
		Example
		How It Works
		Width
		Color
		Sizing
		Animation
	Popovers
		Overview
		Example: Allow Popovers Anywhere
		Example: Using Container Option
		Example
		Four Directions
		Dismiss on Next Click
		Disable Elements
	Progress
		How It Works
		Labels
		Height
		Backgrounds
		Multiple Bars
		Stripped
		Animated Strips
	Scrollspy
		How It Works
		Example in navbar
		Example with Nested nav
		Example with List-group
	Spinners
		About
		Border Spinner
		Colors
		Growing Spinner
		Alignment
		Margin
		Placement
		Flex
		Float
		Text Aligns
		Size
		Buttons
	Toasts
		Overview
		Examples
			Basic
			Live
		Translucent
		Stacking
		Custom Content
		Color Schemes
		Placement
		Accessibility
	Tooltips
		Overview
		Example: Enable Tooltips Everywhere
		Example
	Conclusion
Chapter 7 Helpers
	Clearfix
	Colored Links
	Ratios
	About
		Example
		Aspect Ratio
		Custom Ratio
	Position
		Fixed Top
		Fixed Bottom
		Sticky Top
		Responsive Sticky Top
	Visually Hidden
	Stretched Link
		Identifying the Containing Block
	Text Truncation
	Conclusion
Chapter 8 Utilities
	Background
		Background Color
		Background Gradient
	Borders
		Additive
		Subtractive
		Border Color
		Border-Width
		Border-Radios
		Sizes
	Colors
	Display
		How It Works
		Notation
			Examples
		Hiding Elements
		Display in Print
	Flex
		Enable Flex Behaviors
		Direction
		Justify-content
		Align-items
		Align-self
		Fill
		Grow and Shrink
		Auto-margins
			With Align-items
		Wrap
		Order
		Align Content
		Media Object
	Float
		Overview
		Responsive
	Interactions
		Text Selection
		Pointer Events
	Overflow
	Position
		Position Values
		Arrange Elements
		Center Elements
			Examples
	Shadows
		Examples
	Sizing
		Relative to the Parent
		Relative to the Viewport
	Spacing
		Margin and Padding
		Notation
		Here sides are one of the following:
			Examples
		Horizontal Centering
		Negative Margin
		Gap
	Text
		Text Alignment
			Text Wrapping and Overflow
		Word Break
		Text Transform
		Font Weight and Italics
		Line Height
		Monospace
		Reset Color
		Text Decoration
	Vertical Alignment
		With inline elements
		With Table Cells
	Visibility
		Example
	Conclusion
Chapter 9 Extending Bootstrap
	Working with API
		API
		API Explained
		Custom Class Prefix
			Output
		States
			Output
		Responsive Utilities
			Output
		Changing Utilities
		Print Utilities
			Output
		Importance
		Using the API
		Add Utilities
		Modify Utilities
		Enable Responsively
		Rename Utilities
		Remove Utilities
		Remove Utility in RTL
			Output
	Using Bootstrap in Django
		Code
	Using Bootstrap in WordPress
	Using Bootstrap in Templates
		Integrate Django Bootstrap Template
		Django Bootstrap-4 Templates Are Extended
	Conclusion
Bibliography
Index