Mastering Bootstrap: A Beginner’s Guide
- Length: 570 pages
- Edition: 1
- Language: English
- Publisher: CRC Press
- Publication Date: 2022-11-29
- ISBN-10: 1032316004
- ISBN-13: 9781032316000
- Sales Rank: #0 (See Top 100 Books)
Mastering Bootstrap helps the reader master Bootstrap CSS framework for faster and robust front-end development.
If you work in the web development world, you must have heard about Bootstrap, a comprehensive toolkit that includes HTML, CSS, and JavaScript tools for creating and developing web pages and apps.
Ever since it was released as an open-source project in 2011, Bootstrap has attracted increasing attention for legitimate reasons. Bootstrap is popular among web designers and developers since it is versatile and straightforward. Its significant characteristics are that it is adaptive by aesthetics, supports a colossal spectrum of browsers, and provides a reliable configuration by employing reusable components. It is simple to use and understand.
Bootstrap consists of a source code version and an executable version. Software engineers use Bootstrap for a variety of reasons. The Grid System in Bootstrap is popular mainly because it is simple to set up and master, with many components, styling for numerous HTML elements ranging from typography to buttons, and JavaScript plugin compatibility, all of which makes it even more versatile.
For a web designer, learning Bootstrap is almost imperative today since it allows your website to look good on every screen resolution and adaptable on every device without much effort. This will make your site appear more presentable, reduce development time, and be more convenient since it is simple to learn and execute. Many businesses continue to use it; hence it is a valuable talent.
As a career option, knowing Bootstrap might be a massive help if you want to work as a web developer. This is true whether you specialize in front-end or back-end web development. Bootstrap can help you save time and ensure that your websites are mobile-friendly and responsive.
With Mastering Bootstrap, learning Bootstrap becomes a charm, and will undoubtedly help readers advance their careers.
The Mastering Computer Science series is edited by Sufyan bin Uzayr, a writer and educator with more than a decade of experience in the computing field.
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 Accordion Item Accordion Item Always Open Accordion Item Accordion Item Accordion Item 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 Accordion Item Accordion Item Flush Accordion Item Accordion Item Accordion Item Always Open Accordion Item Accordion Item Accordion Item 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
Donate to keep this site alive
1. Disable the AdBlock plugin. Otherwise, you may not get any links.
2. Solve the CAPTCHA.
3. Click download link.
4. Lead to download server to download.