#1 – Intro & Setup
Learn how to create a responsive landing page with Bootstrap – using features & componet new to Bootstrap 5 (accodion and offcanvas), in this Bootstrap 5 crash course tutorial series.
What is Bootstrap (5)？
- Front-end, CSS & JavaScript for making mobile-first, responsive websites
- Includes pre-made components – navbars, modals, tabs, tooltips, buttons, accordions & more…
- Comes fully baked with a responsive, 12-column, CSS grid system for layouts
- Easy to customize & also ensures browser compatibility (for supported browsers)
使用工具
- Visual Studio Code
- 套件1：Live Sass Compiler
- 套件2：Live Server
使用 BS5 的方法有
- 下載來源檔案
- 使用 CDN 載入
- 使用 npm 安裝 bootstrap
Access the course files on GitHub
範例程式碼
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Net Ninja Pro - the Book</title>
</head>
<body>
<h1>Net Ninja Pro</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>#2 – Bootstrap 5 New Features
In this Bootstrap 5 tutorial you’ll learn about all the main new features since version 4 – including the dropping of jQuery (!!!), new utility classes, new components.
- Bootstrap 5 has dropped(停止) jQuery!
- Forms have been revamped(改造)
- Right-To-Left (RTL) support added
- New utility classes (positioning, font size, border radius etc)
- Minor changes to some components & grid (Jumbotron gone)
- Bootstrap Icons
- Two new components – Offcanvas & Accordion
Customize → Color
#3 – Colours & Typography
In this Bootstrap 5 tutorial you’ll learn how to make use of the Bootstrap text & headings styles as well as theme colours.
- Reboot
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Net Ninja Pro - the Book</title>
</head>
<body>
<!-- heading tags -->
<h1>Bootstrap 5 Tutorial</h1>
<h2>this is an h2</h2>
<h3>this is an h3</h3>
<h2 class="h3">this is an h2 tag with the h3 class</h2>
<!-- display headings -->
<h1 class="display-1">display 1 heading</h1>
<h1 class="display-2">display 2 heading</h1>
<h1 class="display-6">display 6 heading</h1>
<p class="display-1">p tag with display-1 class</p>
<!-- lead text & alignment -->
<small>this is small text</small>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<p class="lead text-center">hello ninjas</p>
<p class="lead text-end">hello ninjas</p>
<p class="lead text-start">hello ninjas</p>
<!-- text decoration & font weight -->
<p class="text-decoration-underline">this is underlined text</p>
<p class="text-decoration-line-through">this is line through text</p>
<p class="fw-bold">this is bold text</p>
<small>this is small text</small>
<!-- text colours -->
<p class="text-primary">theme primary colour</p>
<p class="text-secondary">theme secondary colour</p>
<p class="text-info">theme info colour</p>
<p class="text-warning">theme warning colour</p>
<p class="text-success">theme success colour</p>
<p class="text-danger">theme danger colour</p>
<p class="text-muted">theme muted colour</p>
<!-- bg colors -->
<p class="text-white bg-primary">white text on primary bg</p>
<p class="text-white bg-secondary">white text on secondary bg</p>
<p class="text-light bg-danger">white text on danger bg</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>#4 – Buttons & Button Groups
In this Bootstrap 5 tutorial I’ll show you how to use the button classes and the button group component (to group buttons together).
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Net Ninja Pro - the Book</title>
</head>
<body>
<!-- basic buttons -->
<h2>Buttons</h2>
<button class="btn btn-primary">primary button</button>
<button class="btn btn-secondary">secondary button</button>
<!-- anchor tags as buttons -->
<h2>Links as buttons</h2>
<a href="#" class="btn btn-info">info anchor tag</a>
<a href="#" class="btn btn-success">success anchor tag</a>
<!-- button sizes -->
<h2>Button sizes</h2>
<button class="btn btn-lg btn-danger">large danger button</button>
<button class="btn btn-sm btn-warning">small warning button</button>
<!-- outlined styles -->
<h2>Button Styles</h2>
<button class="btn btn-outline-primary">outlined primary button</button>
<button class="btn btn-outline-secondary btn-lg">large outlined secondary button</button>
<!-- button groups -->
<h2>Button Groups</h2>
<div class="btn-group">
<a href="#" class="btn btn-primary">button 1</a>
<a href="#" class="btn btn-warning">button 2</a>
<a href="#" class="btn btn-success">button 3</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>#5 – Utility Classes
In this Bootstrap 5 tutorial I’ll show you some of the different utility classes – for things like spacing and border – that we can add to our HTML elements.
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Net Ninja Pro - the Book</title>
</head>
<body>
<!-- margin and padding -->
<div class="bg-primary m-1 p-1">small margin and padding</div>
<div class="bg-primary m-5 p-5">large margin and padding</div>
<div class="bg-primary my-3 px-5">margin in y direction, padding in x direction</div>
<div class="bg-primary mt-3 mb-4 ms-5 me-1 ps-5 pt-4 pe-2 pb-1">m & p for each direction</div>
<!-- borders -->
<div class="m-3 p-3 border">default border</div>
<div class="m-3 p-3 border-top border-end">individual borders</div>
<div class="m-3 p-3 border-start border-success">border success colour at start</div>
<div class="m-3 p-3 border-start border-danger border-5">thicker border</div>
<div class="m-3 p-3 rounded border border-5">rounded corners</div>
<div class="m-3 p-3 rounded-pill border border-5">rounded pill corners</div>
<!-- box shadow -->
<div class="m-3 p-3 shadow-sm">element with small box shadow</div>
<div class="m-3 p-3 shadow-lg">element with large box shadow</div>
<!-- font weight -->
<p class="fw-bold">bold text</p>
<p class="fw-bolder">bolder text</p>
<p>normal text</p>
<p class="fw-light">light text</p>
<p class="fst-italic">italic text</p>
<p class="fst-italic fw-light">italic light text</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>#6 – Containers
Learn how to use containers in this Bootstrap 5 tutorial.
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Net Ninja Pro - the Book</title>
</head>
<body>
<div class="container my-5">
<h2>normal container</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui facilis maiores itaque? Tenetur corporis adipisci eaque, laudantium, reprehenderit numquam deserunt debitis eius nobis, blanditiis sequi ratione ipsum esse repudiandae quo.</p>
</div>
<div class="container-fluid">
<h2>fluid container</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium consectetur dolorum pariatur laboriosam molestias delectus non fuga in magni dolor quibusdam magnam officia numquam, ullam eum aliquid ducimus repellendus neque!</p>
</div>
<div class="container-lg my-5">
<h2>100% width until lg screens, then container</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio deleniti et temporibus, vero fugiat dolores, quaerat praesentium voluptatum dicta, soluta harum porro repellendus ipsa repudiandae sapiente est illo? Tenetur, voluptatibus?</p>
</div>
<div class="container-xl my-5">
<h2>100% width until xl screens, then container</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae reprehenderit ex dolores sapiente architecto, odio, quam voluptates molestias, porro amet labore. Iusto aliquid voluptate magnam repudiandae ad totam nesciunt labore!</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>#7 – Grid Layout (part 1)
Learn how to use the grid system in Bootstrap 5 – using containers, rows, columns and responsive classes too.
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Net Ninja Pro - the Book</title>
</head>
<body>
<div class="container-lg my-5">
<h2>basic grid</h2>
<div class="row">
<div class="col">
<div class="p-5 bg-primary text-light">col-1</div>
</div>
<div class="col">
<div class="p-5 bg-primary text-light">col-2</div>
</div>
<div class="col">
<div class="p-5 bg-primary text-light">col-3</div>
</div>
<div class="col">
<div class="p-5 bg-primary text-light">col-4</div>
</div>
</div>
</div>
<div class="container-lg my-5">
<h2>column widths</h2>
<div class="row">
<div class="col-6">
<div class="p-5 bg-primary text-light">col-1</div>
</div>
<div class="col-3">
<div class="p-5 bg-primary text-light">col-2</div>
</div>
<div class="col-3">
<div class="p-5 bg-primary text-light">col-3</div>
</div>
</div>
</div>
<div class="container-lg my-5">
<h2>responsive column widths</h2>
<div class="row">
<div class="col-sm-4 col-lg-6">
<div class="p-5 bg-primary text-light">col-1</div>
</div>
<div class="col-sm-4 col-lg-3">
<div class="p-5 bg-primary text-light">col-2</div>
</div>
<div class="col-sm-4 col-lg-3">
<div class="p-5 bg-primary text-light">col-3</div>
</div>
</div>
</div>
<div class="container-lg my-5">
<h2>justifying columns</h2>
<div class="row justify-content-center">
<div class="col-md-3">
<div class="p-5 bg-primary text-light">col 1</div>
</div>
<div class="col-md-3">
<div class="p-5 bg-primary text-light">col 2</div>
</div>
<div class="col-md-3">
<div class="p-5 bg-primary text-light">col 3</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>justifying columns
- justify-content-start
- justify-content-center
- justify-content-end
- justify-content-around
- justify-content-between
- justify-content-evenly
#8 – Grid Layout (part 2)
In this lesson we’ll take what we learnt about the grid system in Bootstrap 5 and use it to start our page design.
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Net Ninja Pro - the Book</title>
<style>
section {
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#pricing" class="btn btn-secondary btn-lg">Buy Now</a>
</div>
<div class="col-md-5 text-center d-none d-md-block">
<img class="img-fluid" src="/assets/ebook-cover.png" alt="ebook cover">
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<!-- topics at a glance -->
<!-- reviews list -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>#9 – Navbars
In this Bootstrap 5 tutorial you’ll learn how to use the navbar component and we’ll add it to our page design.
- 使用 Bootstrap 5 文件，搜尋元件找到想要的樣式、複製程式碼到網頁編輯器
- Containers
- Brand
- Nav
- Color schemes
- Placement
- Toggler
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Net Ninja Pro - the Book</title>
<style>
section {
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-xxl">
<a href="#intro" class="navbar-brand">
<span class="fw-bold text-secondary">
Net Ninja Pro - the Book
</span>
</a>
<!-- toggle button for mobile nav -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#topics">About The Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get in Touch</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="#pricing">buy now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#pricing" class="btn btn-secondary btn-lg">Buy Now</a>
</div>
<div class="col-md-5 text-center d-none d-md-block">
<img class="img-fluid" src="/assets/ebook-cover.png" alt="ebook cover">
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<!-- topics at a glance -->
<!-- reviews list -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>#10 – Cards
In this Bootstrap tutorial you’ll learn how to use the Card component – in our site we’ll use it for te pricing options.
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Net Ninja Pro - the Book</title>
<style>
section {
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-xxl">
<a href="#intro" class="navbar-brand">
<span class="fw-bold text-secondary">
Net Ninja Pro - the Book
</span>
</a>
<!-- toggle button for mobile nav -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#topics">About The Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get in Touch</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="#pricing">buy now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#pricing" class="btn btn-secondary btn-lg">Buy Now</a>
</div>
<div class="col-md-5 text-center d-none d-md-block">
<img class="img-fluid" src="/assets/ebook-cover.png" alt="ebook cover">
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<section id="pricing" class="bg-light mt-5">
<div class="container-lg">
<div class="text-center">
<h2>Pricing Plans</h2>
<p class="lead text-muted">Choose a pricing plan to suit you.</p>
</div>
<div class="row my-5 align-items-center justify-content-center g-0">
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Starter Edition</h4>
<p class="lead card-subtitle">eBook download only</p>
<p class="display-5 my-4 text-primary fw-bold">$12.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-9 col-lg-4">
<div class="card border-primary border-2">
<div class="card-header text-center text-primary">Most Popular</div>
<div class="card-body text-center py-5">
<h4 class="card-title">Complete Edition</h4>
<p class="lead card-subtitle">eBook download & all updates</p>
<p class="display-4 my-4 text-primary fw-bold">$18.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Ultimate Edition</h4>
<p class="lead card-subtitle">download, updates & extras</p>
<p class="display-5 my-4 text-primary fw-bold">$24.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- topics at a glance -->
<!-- reviews list -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>#11 – Accordions
In this Bootstrap tutorial we’ll look at one of the new components of Bootstrap 5 – the accordion component.
- 使用 Bootstrap 文件，了解程式碼範例的使用、調整，透過練習熟練功能的使用方式即可，不需要全部記憶。
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Net Ninja Pro - the Book</title>
<style>
section {
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-xxl">
<a href="#intro" class="navbar-brand">
<span class="fw-bold text-secondary">
Net Ninja Pro - the Book
</span>
</a>
<!-- toggle button for mobile nav -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#topics">About The Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get in Touch</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="#pricing">buy now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#pricing" class="btn btn-secondary btn-lg">Buy Now</a>
</div>
<div class="col-md-5 text-center d-none d-md-block">
<img class="img-fluid" src="/assets/ebook-cover.png" alt="ebook cover">
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<section id="pricing" class="bg-light mt-5">
<div class="container-lg">
<div class="text-center">
<h2>Pricing Plans</h2>
<p class="lead text-muted">Choose a pricing plan to suit you.</p>
</div>
<div class="row my-5 align-items-center justify-content-center g-0">
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Starter Edition</h4>
<p class="lead card-subtitle">eBook download only</p>
<p class="display-5 my-4 text-primary fw-bold">$12.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-9 col-lg-4">
<div class="card border-primary border-2">
<div class="card-header text-center text-primary">Most Popular</div>
<div class="card-body text-center py-5">
<h4 class="card-title">Complete Edition</h4>
<p class="lead card-subtitle">eBook download & all updates</p>
<p class="display-4 my-4 text-primary fw-bold">$18.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Ultimate Edition</h4>
<p class="lead card-subtitle">download, updates & extras</p>
<p class="display-5 my-4 text-primary fw-bold">$24.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- topics at a glance -->
<section id="topics">
<div class="container-md">
<div class="text-center">
<h2>Inside the Book...</h2>
<p class="lead text-muted">A quick glance at the topics you'll learn</p>
</div>
<div class="row my-5 g-5 justify-content-around align-items-center">
<div class="col-6 col-lg-4">
<img src="/assets/kindle.png" class="img-fluid" alt="ebook">
</div>
<div class="col-lg-6">
<!-- accordion -->
<div class="accordion" id="chapters">
<div class="accordion-item">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-1" aria-expanded="true" aria-controls="chapter-1">
Chapter 1 - Your First Web Page
</button>
</h2>
<div id="chapter-1" class="accordion-collapse collapse show" aria-labelledby="heading-1" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-2" aria-expanded="false" aria-controls="chapter-2">
Chapter 2 - Mastering CSS
</button>
</h2>
<div id="chapter-2" class="accordion-collapse collapse" aria-labelledby="heading-2" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-3" aria-expanded="false" aria-controls="chapter-3">
Chapter 3 - The Power of JavaScript
</button>
</h2>
<div id="chapter-3" class="accordion-collapse collapse" aria-labelledby="heading-3" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-4" aria-expanded="false" aria-controls="chapter-4">
Chapter 4 Storing Data (Firebase Databases)
</button>
</h2>
<div id="chapter-4" class="accordion-collapse collapse" aria-labelledby="heading-4" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-5" aria-expanded="false" aria-controls="chapter-5">
Chapter 5 - User Authentication
</button>
</h2>
<div id="chapter-5" class="accordion-collapse collapse" aria-labelledby="heading-5" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- reviews list -->
<!-- contact form -->
<!-- get updates / modal trigger -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>#12 – List Groups
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Net Ninja Pro - the Book</title>
<style>
section {
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-xxl">
<a href="#intro" class="navbar-brand">
<span class="fw-bold text-secondary">
Net Ninja Pro - the Book
</span>
</a>
<!-- toggle button for mobile nav -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#topics">About The Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get in Touch</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="#pricing">buy now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#pricing" class="btn btn-secondary btn-lg">Buy Now</a>
</div>
<div class="col-md-5 text-center d-none d-md-block">
<img class="img-fluid" src="/assets/ebook-cover.png" alt="ebook cover">
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<section id="pricing" class="bg-light mt-5">
<div class="container-lg">
<div class="text-center">
<h2>Pricing Plans</h2>
<p class="lead text-muted">Choose a pricing plan to suit you.</p>
</div>
<div class="row my-5 align-items-center justify-content-center g-0">
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Starter Edition</h4>
<p class="lead card-subtitle">eBook download only</p>
<p class="display-5 my-4 text-primary fw-bold">$12.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-9 col-lg-4">
<div class="card border-primary border-2">
<div class="card-header text-center text-primary">Most Popular</div>
<div class="card-body text-center py-5">
<h4 class="card-title">Complete Edition</h4>
<p class="lead card-subtitle">eBook download & all updates</p>
<p class="display-4 my-4 text-primary fw-bold">$18.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Ultimate Edition</h4>
<p class="lead card-subtitle">download, updates & extras</p>
<p class="display-5 my-4 text-primary fw-bold">$24.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- topics at a glance -->
<section id="topics">
<div class="container-md">
<div class="text-center">
<h2>Inside the Book...</h2>
<p class="lead text-muted">A quick glance at the topics you'll learn</p>
</div>
<div class="row my-5 g-5 justify-content-around align-items-center">
<div class="col-6 col-lg-4">
<img src="/assets/kindle.png" class="img-fluid" alt="ebook">
</div>
<div class="col-lg-6">
<!-- accordion -->
<div class="accordion" id="chapters">
<div class="accordion-item">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-1" aria-expanded="true" aria-controls="chapter-1">
Chapter 1 - Your First Web Page
</button>
</h2>
<div id="chapter-1" class="accordion-collapse collapse show" aria-labelledby="heading-1" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-2" aria-expanded="false" aria-controls="chapter-2">
Chapter 2 - Mastering CSS
</button>
</h2>
<div id="chapter-2" class="accordion-collapse collapse" aria-labelledby="heading-2" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-3" aria-expanded="false" aria-controls="chapter-3">
Chapter 3 - The Power of JavaScript
</button>
</h2>
<div id="chapter-3" class="accordion-collapse collapse" aria-labelledby="heading-3" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-4" aria-expanded="false" aria-controls="chapter-4">
Chapter 4 Storing Data (Firebase Databases)
</button>
</h2>
<div id="chapter-4" class="accordion-collapse collapse" aria-labelledby="heading-4" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-5" aria-expanded="false" aria-controls="chapter-5">
Chapter 5 - User Authentication
</button>
</h2>
<div id="chapter-5" class="accordion-collapse collapse" aria-labelledby="heading-5" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- reviews list -->
<section id="reviews" class="bg-light">
<div class="container-lg">
<div class="text-center">
<h2>Book Reviews</h2>
<p class="lead">What my students have said about the book...</p>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="list-group">
<div class="list-group-item py-3">
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- contact form -->
<!-- get updates / modal trigger -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>#13 – Bootstrap Icons
In this bootstrap tutorial we’ll take a look at the icon library and how to use icons in our web page.
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<title>Net Ninja Pro - the Book</title>
<style>
section {
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-xxl">
<a href="#intro" class="navbar-brand">
<span class="fw-bold text-secondary">
<i class="bi bi-book-half"></i>
Net Ninja Pro - the Book
</span>
</a>
<!-- toggle button for mobile nav -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#topics">About The Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get in Touch</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="#pricing">buy now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#pricing" class="btn btn-secondary btn-lg">Buy Now</a>
</div>
<div class="col-md-5 text-center d-none d-md-block">
<img class="img-fluid" src="/assets/ebook-cover.png" alt="ebook cover">
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<section id="pricing" class="bg-light mt-5">
<div class="container-lg">
<div class="text-center">
<h2>Pricing Plans</h2>
<p class="lead text-muted">Choose a pricing plan to suit you.</p>
</div>
<div class="row my-5 align-items-center justify-content-center g-0">
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Starter Edition</h4>
<p class="lead card-subtitle">eBook download only</p>
<p class="display-5 my-4 text-primary fw-bold">$12.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-9 col-lg-4">
<div class="card border-primary border-2">
<div class="card-header text-center text-primary">Most Popular</div>
<div class="card-body text-center py-5">
<h4 class="card-title">Complete Edition</h4>
<p class="lead card-subtitle">eBook download & all updates</p>
<p class="display-4 my-4 text-primary fw-bold">$18.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Ultimate Edition</h4>
<p class="lead card-subtitle">download, updates & extras</p>
<p class="display-5 my-4 text-primary fw-bold">$24.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- topics at a glance -->
<section id="topics">
<div class="container-md">
<div class="text-center">
<h2>Inside the Book...</h2>
<p class="lead text-muted">A quick glance at the topics you'll learn</p>
</div>
<div class="row my-5 g-5 justify-content-around align-items-center">
<div class="col-6 col-lg-4">
<img src="/assets/kindle.png" class="img-fluid" alt="ebook">
</div>
<div class="col-lg-6">
<!-- accordion -->
<div class="accordion" id="chapters">
<div class="accordion-item">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-1" aria-expanded="true" aria-controls="chapter-1">
Chapter 1 - Your First Web Page
</button>
</h2>
<div id="chapter-1" class="accordion-collapse collapse show" aria-labelledby="heading-1" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-2" aria-expanded="false" aria-controls="chapter-2">
Chapter 2 - Mastering CSS
</button>
</h2>
<div id="chapter-2" class="accordion-collapse collapse" aria-labelledby="heading-2" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-3" aria-expanded="false" aria-controls="chapter-3">
Chapter 3 - The Power of JavaScript
</button>
</h2>
<div id="chapter-3" class="accordion-collapse collapse" aria-labelledby="heading-3" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-4" aria-expanded="false" aria-controls="chapter-4">
Chapter 4 Storing Data (Firebase Databases)
</button>
</h2>
<div id="chapter-4" class="accordion-collapse collapse" aria-labelledby="heading-4" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-5" aria-expanded="false" aria-controls="chapter-5">
Chapter 5 - User Authentication
</button>
</h2>
<div id="chapter-5" class="accordion-collapse collapse" aria-labelledby="heading-5" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- reviews list -->
<section id="reviews" class="bg-light">
<div class="container-lg">
<div class="text-center">
<h2><i class="bi bi-stars"></i>Book Reviews</h2>
<p class="lead">What my students have said about the book...</p>
</div>
<div class="row justify-content-center my-5">
<div class="col-lg-8">
<div class="list-group">
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- contact form -->
<!-- get updates / modal trigger -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>#14 – Working with Forms
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<title>Net Ninja Pro - the Book</title>
<style>
section {
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-xxl">
<a href="#intro" class="navbar-brand">
<span class="fw-bold text-secondary">
<i class="bi bi-book-half"></i>
Net Ninja Pro - the Book
</span>
</a>
<!-- toggle button for mobile nav -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#topics">About The Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get in Touch</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="#pricing">buy now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#pricing" class="btn btn-secondary btn-lg">Buy Now</a>
</div>
<div class="col-md-5 text-center d-none d-md-block">
<img class="img-fluid" src="/assets/ebook-cover.png" alt="ebook cover">
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<section id="pricing" class="bg-light mt-5">
<div class="container-lg">
<div class="text-center">
<h2>Pricing Plans</h2>
<p class="lead text-muted">Choose a pricing plan to suit you.</p>
</div>
<div class="row my-5 align-items-center justify-content-center g-0">
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Starter Edition</h4>
<p class="lead card-subtitle">eBook download only</p>
<p class="display-5 my-4 text-primary fw-bold">$12.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-9 col-lg-4">
<div class="card border-primary border-2">
<div class="card-header text-center text-primary">Most Popular</div>
<div class="card-body text-center py-5">
<h4 class="card-title">Complete Edition</h4>
<p class="lead card-subtitle">eBook download & all updates</p>
<p class="display-4 my-4 text-primary fw-bold">$18.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Ultimate Edition</h4>
<p class="lead card-subtitle">download, updates & extras</p>
<p class="display-5 my-4 text-primary fw-bold">$24.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- topics at a glance -->
<section id="topics">
<div class="container-md">
<div class="text-center">
<h2>Inside the Book...</h2>
<p class="lead text-muted">A quick glance at the topics you'll learn</p>
</div>
<div class="row my-5 g-5 justify-content-around align-items-center">
<div class="col-6 col-lg-4">
<img src="/assets/kindle.png" class="img-fluid" alt="ebook">
</div>
<div class="col-lg-6">
<!-- accordion -->
<div class="accordion" id="chapters">
<div class="accordion-item">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-1" aria-expanded="true" aria-controls="chapter-1">
Chapter 1 - Your First Web Page
</button>
</h2>
<div id="chapter-1" class="accordion-collapse collapse show" aria-labelledby="heading-1" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-2" aria-expanded="false" aria-controls="chapter-2">
Chapter 2 - Mastering CSS
</button>
</h2>
<div id="chapter-2" class="accordion-collapse collapse" aria-labelledby="heading-2" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-3" aria-expanded="false" aria-controls="chapter-3">
Chapter 3 - The Power of JavaScript
</button>
</h2>
<div id="chapter-3" class="accordion-collapse collapse" aria-labelledby="heading-3" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-4" aria-expanded="false" aria-controls="chapter-4">
Chapter 4 Storing Data (Firebase Databases)
</button>
</h2>
<div id="chapter-4" class="accordion-collapse collapse" aria-labelledby="heading-4" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-5" aria-expanded="false" aria-controls="chapter-5">
Chapter 5 - User Authentication
</button>
</h2>
<div id="chapter-5" class="accordion-collapse collapse" aria-labelledby="heading-5" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- reviews list -->
<section id="reviews" class="bg-light">
<div class="container-lg">
<div class="text-center">
<h2><i class="bi bi-stars"></i>Book Reviews</h2>
<p class="lead">What my students have said about the book...</p>
</div>
<div class="row justify-content-center my-5">
<div class="col-lg-8">
<div class="list-group">
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- contact form -->
<!-- form-control, form-label, form-select, input-group, input-group-text -->
<section id="contact">
<div class="container-lg">
<div class="text-center">
<h2>Get in Touch</h2>
<p class="lead">Questions to ask? Fill out the form to contact me directly...</p>
</div>
<div class="row justify-content-center my-5">
<div class="col-lg-6">
<form>
<label for="email" class="form-label">Email address:</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-envelope-fill"></i>
</span>
<input type="email" class="form-control" id="email" placeholder="e.g. mario@example.ocm">
</div>
<label for="name" class="form-label">Name:</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-person-fill"></i>
</span>
<input type="text" class="form-control" id="name" placeholder="e.g. Mario">
</div>
<label for="subject" class="form-label">What is your question about?</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-chat-right-dots-fill"></i>
</span>
<select class="form-select" id="subject">
<option value="pricing" selected>Pricing query</option>
<option value="content">Content query</option>
<option value="other">Other query</option>
</select>
</div>
<div class="form-floating mb-4 mt-5">
<textarea id="query" class="form-control" style="height: 140px"></textarea>
<label for="query">Your query...</label>
</div>
<div class="mb-4 text-center">
<button type="submit" class="btn btn-secondary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- get updates / modal trigger -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>#15 – Tooltips
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<title>Net Ninja Pro - the Book</title>
<style>
section {
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-xxl">
<a href="#intro" class="navbar-brand">
<span class="fw-bold text-secondary">
<i class="bi bi-book-half"></i>
Net Ninja Pro - the Book
</span>
</a>
<!-- toggle button for mobile nav -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#topics">About The Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get in Touch</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="#pricing">buy now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#pricing" class="btn btn-secondary btn-lg">Buy Now</a>
</div>
<div class="col-md-5 text-center d-none d-md-block">
<!-- tooltip -->
<span class="tt" data-bs-placement="bottom" title="Net Ninja Book Cover">
<img class="img-fluid" src="/assets/ebook-cover.png" alt="ebook cover">
</span>
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<section id="pricing" class="bg-light mt-5">
<div class="container-lg">
<div class="text-center">
<h2>Pricing Plans</h2>
<p class="lead text-muted">Choose a pricing plan to suit you.</p>
</div>
<div class="row my-5 align-items-center justify-content-center g-0">
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Starter Edition</h4>
<p class="lead card-subtitle">eBook download only</p>
<p class="display-5 my-4 text-primary fw-bold">$12.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-9 col-lg-4">
<div class="card border-primary border-2">
<div class="card-header text-center text-primary">Most Popular</div>
<div class="card-body text-center py-5">
<h4 class="card-title">Complete Edition</h4>
<p class="lead card-subtitle">eBook download & all updates</p>
<p class="display-4 my-4 text-primary fw-bold">$18.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Ultimate Edition</h4>
<p class="lead card-subtitle">download, updates & extras</p>
<p class="display-5 my-4 text-primary fw-bold">$24.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- topics at a glance -->
<section id="topics">
<div class="container-md">
<div class="text-center">
<h2>Inside the Book...</h2>
<p class="lead text-muted">A quick glance at the topics you'll learn</p>
</div>
<div class="row my-5 g-5 justify-content-around align-items-center">
<div class="col-6 col-lg-4">
<img src="/assets/kindle.png" class="img-fluid" alt="ebook">
</div>
<div class="col-lg-6">
<!-- accordion -->
<div class="accordion" id="chapters">
<div class="accordion-item">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-1" aria-expanded="true" aria-controls="chapter-1">
Chapter 1 - Your First Web Page
</button>
</h2>
<div id="chapter-1" class="accordion-collapse collapse show" aria-labelledby="heading-1" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-2" aria-expanded="false" aria-controls="chapter-2">
Chapter 2 - Mastering CSS
</button>
</h2>
<div id="chapter-2" class="accordion-collapse collapse" aria-labelledby="heading-2" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-3" aria-expanded="false" aria-controls="chapter-3">
Chapter 3 - The Power of JavaScript
</button>
</h2>
<div id="chapter-3" class="accordion-collapse collapse" aria-labelledby="heading-3" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-4" aria-expanded="false" aria-controls="chapter-4">
Chapter 4 Storing Data (Firebase Databases)
</button>
</h2>
<div id="chapter-4" class="accordion-collapse collapse" aria-labelledby="heading-4" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-5" aria-expanded="false" aria-controls="chapter-5">
Chapter 5 - User Authentication
</button>
</h2>
<div id="chapter-5" class="accordion-collapse collapse" aria-labelledby="heading-5" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- reviews list -->
<section id="reviews" class="bg-light">
<div class="container-lg">
<div class="text-center">
<h2><i class="bi bi-stars"></i>Book Reviews</h2>
<p class="lead">What my students have said about the book...</p>
</div>
<div class="row justify-content-center my-5">
<div class="col-lg-8">
<div class="list-group">
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- contact form -->
<!-- form-control, form-label, form-select, input-group, input-group-text -->
<section id="contact">
<div class="container-lg">
<div class="text-center">
<h2>Get in Touch</h2>
<p class="lead">Questions to ask? Fill out the form to contact me directly...</p>
</div>
<div class="row justify-content-center my-5">
<div class="col-lg-6">
<form>
<label for="email" class="form-label">Email address:</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-envelope-fill"></i>
</span>
<input type="email" class="form-control" id="email" placeholder="e.g. mario@example.ocm">
<!-- tooltip -->
<span class="input-group-text">
<span class="tt" data-bs-placement="bottom" title="Enter an email address we can reply to.">
<i class="bi bi-question-circle text-muted"></i>
</span>
</span>
</div>
<label for="name" class="form-label">Name:</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-person-fill"></i>
</span>
<input type="text" class="form-control" id="name" placeholder="e.g. Mario">
<!-- tooltip -->
<span class="input-group-text">
<span class="tt" data-bs-placement="bottom" title="Pretty self explanatory really...">
<i class="bi bi-question-circle text-muted"></i>
</span>
</span>
</div>
<label for="subject" class="form-label">What is your question about?</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-chat-right-dots-fill"></i>
</span>
<select class="form-select" id="subject">
<option value="pricing" selected>Pricing query</option>
<option value="content">Content query</option>
<option value="other">Other query</option>
</select>
</div>
<div class="form-floating mb-4 mt-5">
<textarea id="query" class="form-control" style="height: 140px"></textarea>
<label for="query">Your query...</label>
</div>
<div class="mb-4 text-center">
<button type="submit" class="btn btn-secondary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- get updates / modal trigger -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script>
const tooltips = document.querySelectorAll('.tt');
tooltips.forEach(t => {
new bootstrap.Tooltip(t);
});
</script>
</body>
</html>#16 – Modals
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<title>Net Ninja Pro - the Book</title>
<style>
section {
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-xxl">
<a href="#intro" class="navbar-brand">
<span class="fw-bold text-secondary">
<i class="bi bi-book-half"></i>
Net Ninja Pro - the Book
</span>
</a>
<!-- toggle button for mobile nav -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#topics">About The Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get in Touch</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="#pricing">buy now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#pricing" class="btn btn-secondary btn-lg">Buy Now</a>
</div>
<div class="col-md-5 text-center d-none d-md-block">
<!-- tooltip -->
<span class="tt" data-bs-placement="bottom" title="Net Ninja Book Cover">
<img class="img-fluid" src="/assets/ebook-cover.png" alt="ebook cover">
</span>
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<section id="pricing" class="bg-light mt-5">
<div class="container-lg">
<div class="text-center">
<h2>Pricing Plans</h2>
<p class="lead text-muted">Choose a pricing plan to suit you.</p>
</div>
<div class="row my-5 align-items-center justify-content-center g-0">
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Starter Edition</h4>
<p class="lead card-subtitle">eBook download only</p>
<p class="display-5 my-4 text-primary fw-bold">$12.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-9 col-lg-4">
<div class="card border-primary border-2">
<div class="card-header text-center text-primary">Most Popular</div>
<div class="card-body text-center py-5">
<h4 class="card-title">Complete Edition</h4>
<p class="lead card-subtitle">eBook download & all updates</p>
<p class="display-4 my-4 text-primary fw-bold">$18.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Ultimate Edition</h4>
<p class="lead card-subtitle">download, updates & extras</p>
<p class="display-5 my-4 text-primary fw-bold">$24.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- topics at a glance -->
<section id="topics">
<div class="container-md">
<div class="text-center">
<h2>Inside the Book...</h2>
<p class="lead text-muted">A quick glance at the topics you'll learn</p>
</div>
<div class="row my-5 g-5 justify-content-around align-items-center">
<div class="col-6 col-lg-4">
<img src="/assets/kindle.png" class="img-fluid" alt="ebook">
</div>
<div class="col-lg-6">
<!-- accordion -->
<div class="accordion" id="chapters">
<div class="accordion-item">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-1" aria-expanded="true" aria-controls="chapter-1">
Chapter 1 - Your First Web Page
</button>
</h2>
<div id="chapter-1" class="accordion-collapse collapse show" aria-labelledby="heading-1" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-2" aria-expanded="false" aria-controls="chapter-2">
Chapter 2 - Mastering CSS
</button>
</h2>
<div id="chapter-2" class="accordion-collapse collapse" aria-labelledby="heading-2" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-3" aria-expanded="false" aria-controls="chapter-3">
Chapter 3 - The Power of JavaScript
</button>
</h2>
<div id="chapter-3" class="accordion-collapse collapse" aria-labelledby="heading-3" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-4" aria-expanded="false" aria-controls="chapter-4">
Chapter 4 Storing Data (Firebase Databases)
</button>
</h2>
<div id="chapter-4" class="accordion-collapse collapse" aria-labelledby="heading-4" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-5" aria-expanded="false" aria-controls="chapter-5">
Chapter 5 - User Authentication
</button>
</h2>
<div id="chapter-5" class="accordion-collapse collapse" aria-labelledby="heading-5" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- reviews list -->
<section id="reviews" class="bg-light">
<div class="container-lg">
<div class="text-center">
<h2><i class="bi bi-stars"></i>Book Reviews</h2>
<p class="lead">What my students have said about the book...</p>
</div>
<div class="row justify-content-center my-5">
<div class="col-lg-8">
<div class="list-group">
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- contact form -->
<!-- form-control, form-label, form-select, input-group, input-group-text -->
<section id="contact">
<div class="container-lg">
<div class="text-center">
<h2>Get in Touch</h2>
<p class="lead">Questions to ask? Fill out the form to contact me directly...</p>
</div>
<div class="row justify-content-center my-5">
<div class="col-lg-6">
<form>
<label for="email" class="form-label">Email address:</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-envelope-fill"></i>
</span>
<input type="email" class="form-control" id="email" placeholder="e.g. mario@example.ocm">
<!-- tooltip -->
<span class="input-group-text">
<span class="tt" data-bs-placement="bottom" title="Enter an email address we can reply to.">
<i class="bi bi-question-circle text-muted"></i>
</span>
</span>
</div>
<label for="name" class="form-label">Name:</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-person-fill"></i>
</span>
<input type="text" class="form-control" id="name" placeholder="e.g. Mario">
<!-- tooltip -->
<span class="input-group-text">
<span class="tt" data-bs-placement="bottom" title="Pretty self explanatory really...">
<i class="bi bi-question-circle text-muted"></i>
</span>
</span>
</div>
<label for="subject" class="form-label">What is your question about?</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-chat-right-dots-fill"></i>
</span>
<select class="form-select" id="subject">
<option value="pricing" selected>Pricing query</option>
<option value="content">Content query</option>
<option value="other">Other query</option>
</select>
</div>
<div class="form-floating mb-4 mt-5">
<textarea id="query" class="form-control" style="height: 140px"></textarea>
<label for="query">Your query...</label>
</div>
<div class="mb-4 text-center">
<button type="submit" class="btn btn-secondary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- get updates / modal trigger -->
<section class="bg-light">
<div class="container">
<div class="text-center">
<h2>Stay in The Loop</h2>
<p class="lead"> Get the latest updates as they happen...</p>
</div>
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<p class="text-muted my-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit officia odio, quo dolore quis debitis similique quod blanditiis eos voluptatum autem et dolorum exercitationem ratione nobis sint mollitia enim qui.
</p>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#reg-modal">
Register for Updates
</button>
</div>
</div>
</div>
</section>
<!-- modal itself -->
<div class="modal fade" id="reg-modal" tabindex="-1" aria-labelledby="modal-title" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title">Get the Latest Updates</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, neque fugit odit velit quibusdam eligendi, commodi quam dolore, esse numquam iusto tenetur omnis ea cum sit rem doloribus ratione minus.</p>
<label for="modal-email" class="form-label">Your email address:</label>
<input type="email" class="form-control" id="modal-email" placeholder="e.g. mario@example.com">
</div>
<div class="modal-footer">
<button class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script>
const tooltips = document.querySelectorAll('.tt');
tooltips.forEach(t => {
new bootstrap.Tooltip(t);
});
</script>
</body>
</html>#17 – Offcanvas
In this Bootstrap5 tutorial you’ll learn about a new sidebar component – the Offcanvas.
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<title>Net Ninja Pro - the Book</title>
<style>
section {
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-xxl">
<a href="#intro" class="navbar-brand">
<span class="fw-bold text-secondary">
<i class="bi bi-book-half"></i>
Net Ninja Pro - the Book
</span>
</a>
<!-- toggle button for mobile nav -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#topics">About The Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get in Touch</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="#pricing">buy now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#pricing" class="btn btn-secondary btn-lg">Buy Now</a>
<!-- open sidebar / offcanvas -->
<a href="#sidebar" class="d-block mt-3" data-bs-toggle="offcanvas" role="button" aria-controls="sidebar">Explore my other books</a>
</div>
<div class="col-md-5 text-center d-none d-md-block">
<!-- tooltip -->
<span class="tt" data-bs-placement="bottom" title="Net Ninja Book Cover">
<img class="img-fluid" src="/assets/ebook-cover.png" alt="ebook cover">
</span>
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<section id="pricing" class="bg-light mt-5">
<div class="container-lg">
<div class="text-center">
<h2>Pricing Plans</h2>
<p class="lead text-muted">Choose a pricing plan to suit you.</p>
</div>
<div class="row my-5 align-items-center justify-content-center g-0">
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Starter Edition</h4>
<p class="lead card-subtitle">eBook download only</p>
<p class="display-5 my-4 text-primary fw-bold">$12.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-9 col-lg-4">
<div class="card border-primary border-2">
<div class="card-header text-center text-primary">Most Popular</div>
<div class="card-body text-center py-5">
<h4 class="card-title">Complete Edition</h4>
<p class="lead card-subtitle">eBook download & all updates</p>
<p class="display-4 my-4 text-primary fw-bold">$18.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Ultimate Edition</h4>
<p class="lead card-subtitle">download, updates & extras</p>
<p class="display-5 my-4 text-primary fw-bold">$24.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- topics at a glance -->
<section id="topics">
<div class="container-md">
<div class="text-center">
<h2>Inside the Book...</h2>
<p class="lead text-muted">A quick glance at the topics you'll learn</p>
</div>
<div class="row my-5 g-5 justify-content-around align-items-center">
<div class="col-6 col-lg-4">
<img src="/assets/kindle.png" class="img-fluid" alt="ebook">
</div>
<div class="col-lg-6">
<!-- accordion -->
<div class="accordion" id="chapters">
<div class="accordion-item">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-1" aria-expanded="true" aria-controls="chapter-1">
Chapter 1 - Your First Web Page
</button>
</h2>
<div id="chapter-1" class="accordion-collapse collapse show" aria-labelledby="heading-1" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-2" aria-expanded="false" aria-controls="chapter-2">
Chapter 2 - Mastering CSS
</button>
</h2>
<div id="chapter-2" class="accordion-collapse collapse" aria-labelledby="heading-2" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-3" aria-expanded="false" aria-controls="chapter-3">
Chapter 3 - The Power of JavaScript
</button>
</h2>
<div id="chapter-3" class="accordion-collapse collapse" aria-labelledby="heading-3" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-4" aria-expanded="false" aria-controls="chapter-4">
Chapter 4 Storing Data (Firebase Databases)
</button>
</h2>
<div id="chapter-4" class="accordion-collapse collapse" aria-labelledby="heading-4" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-5" aria-expanded="false" aria-controls="chapter-5">
Chapter 5 - User Authentication
</button>
</h2>
<div id="chapter-5" class="accordion-collapse collapse" aria-labelledby="heading-5" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- reviews list -->
<section id="reviews" class="bg-light">
<div class="container-lg">
<div class="text-center">
<h2><i class="bi bi-stars"></i>Book Reviews</h2>
<p class="lead">What my students have said about the book...</p>
</div>
<div class="row justify-content-center my-5">
<div class="col-lg-8">
<div class="list-group">
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- contact form -->
<!-- form-control, form-label, form-select, input-group, input-group-text -->
<section id="contact">
<div class="container-lg">
<div class="text-center">
<h2>Get in Touch</h2>
<p class="lead">Questions to ask? Fill out the form to contact me directly...</p>
</div>
<div class="row justify-content-center my-5">
<div class="col-lg-6">
<form>
<label for="email" class="form-label">Email address:</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-envelope-fill"></i>
</span>
<input type="email" class="form-control" id="email" placeholder="e.g. mario@example.ocm">
<!-- tooltip -->
<span class="input-group-text">
<span class="tt" data-bs-placement="bottom" title="Enter an email address we can reply to.">
<i class="bi bi-question-circle text-muted"></i>
</span>
</span>
</div>
<label for="name" class="form-label">Name:</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-person-fill"></i>
</span>
<input type="text" class="form-control" id="name" placeholder="e.g. Mario">
<!-- tooltip -->
<span class="input-group-text">
<span class="tt" data-bs-placement="bottom" title="Pretty self explanatory really...">
<i class="bi bi-question-circle text-muted"></i>
</span>
</span>
</div>
<label for="subject" class="form-label">What is your question about?</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-chat-right-dots-fill"></i>
</span>
<select class="form-select" id="subject">
<option value="pricing" selected>Pricing query</option>
<option value="content">Content query</option>
<option value="other">Other query</option>
</select>
</div>
<div class="form-floating mb-4 mt-5">
<textarea id="query" class="form-control" style="height: 140px"></textarea>
<label for="query">Your query...</label>
</div>
<div class="mb-4 text-center">
<button type="submit" class="btn btn-secondary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- get updates / modal trigger -->
<section class="bg-light">
<div class="container">
<div class="text-center">
<h2>Stay in The Loop</h2>
<p class="lead"> Get the latest updates as they happen...</p>
</div>
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<p class="text-muted my-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit officia odio, quo dolore quis debitis similique quod blanditiis eos voluptatum autem et dolorum exercitationem ratione nobis sint mollitia enim qui.
</p>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#reg-modal">
Register for Updates
</button>
</div>
</div>
</div>
</section>
<!-- modal itself -->
<div class="modal fade" id="reg-modal" tabindex="-1" aria-labelledby="modal-title" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title">Get the Latest Updates</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, neque fugit odit velit quibusdam eligendi, commodi quam dolore, esse numquam iusto tenetur omnis ea cum sit rem doloribus ratione minus.</p>
<label for="modal-email" class="form-label">Your email address:</label>
<input type="email" class="form-control" id="modal-email" placeholder="e.g. mario@example.com">
</div>
<div class="modal-footer">
<button class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<!-- offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar" aria-labelledby="sidebar-label">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebar-label">My Other Books</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae magnam sed fugiat. Earum incidunt provident voluptatibus praesentium eveniet rerum esse nostrum, inventore, nulla illo eius voluptas animi quidem veritatis iste!</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script>
const tooltips = document.querySelectorAll('.tt');
tooltips.forEach(t => {
new bootstrap.Tooltip(t);
});
</script>
</body>
</html>#18 – Dropdowns
In this bootstrap tutorial I’ll show you how to use the dropdown component in our sidebar (offcanvas).
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<title>Net Ninja Pro - the Book</title>
<style>
section {
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-xxl">
<a href="#intro" class="navbar-brand">
<span class="fw-bold text-secondary">
<i class="bi bi-book-half"></i>
Net Ninja Pro - the Book
</span>
</a>
<!-- toggle button for mobile nav -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#topics">About The Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get in Touch</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="#pricing">buy now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#pricing" class="btn btn-secondary btn-lg">Buy Now</a>
<!-- open sidebar / offcanvas -->
<a href="#sidebar" class="d-block mt-3" data-bs-toggle="offcanvas" role="button" aria-controls="sidebar">Explore my other books</a>
</div>
<div class="col-md-5 text-center d-none d-md-block">
<!-- tooltip -->
<span class="tt" data-bs-placement="bottom" title="Net Ninja Book Cover">
<img class="img-fluid" src="/assets/ebook-cover.png" alt="ebook cover">
</span>
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<section id="pricing" class="bg-light mt-5">
<div class="container-lg">
<div class="text-center">
<h2>Pricing Plans</h2>
<p class="lead text-muted">Choose a pricing plan to suit you.</p>
</div>
<div class="row my-5 align-items-center justify-content-center g-0">
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Starter Edition</h4>
<p class="lead card-subtitle">eBook download only</p>
<p class="display-5 my-4 text-primary fw-bold">$12.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-9 col-lg-4">
<div class="card border-primary border-2">
<div class="card-header text-center text-primary">Most Popular</div>
<div class="card-body text-center py-5">
<h4 class="card-title">Complete Edition</h4>
<p class="lead card-subtitle">eBook download & all updates</p>
<p class="display-4 my-4 text-primary fw-bold">$18.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Ultimate Edition</h4>
<p class="lead card-subtitle">download, updates & extras</p>
<p class="display-5 my-4 text-primary fw-bold">$24.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- topics at a glance -->
<section id="topics">
<div class="container-md">
<div class="text-center">
<h2>Inside the Book...</h2>
<p class="lead text-muted">A quick glance at the topics you'll learn</p>
</div>
<div class="row my-5 g-5 justify-content-around align-items-center">
<div class="col-6 col-lg-4">
<img src="/assets/kindle.png" class="img-fluid" alt="ebook">
</div>
<div class="col-lg-6">
<!-- accordion -->
<div class="accordion" id="chapters">
<div class="accordion-item">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-1" aria-expanded="true" aria-controls="chapter-1">
Chapter 1 - Your First Web Page
</button>
</h2>
<div id="chapter-1" class="accordion-collapse collapse show" aria-labelledby="heading-1" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-2" aria-expanded="false" aria-controls="chapter-2">
Chapter 2 - Mastering CSS
</button>
</h2>
<div id="chapter-2" class="accordion-collapse collapse" aria-labelledby="heading-2" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-3" aria-expanded="false" aria-controls="chapter-3">
Chapter 3 - The Power of JavaScript
</button>
</h2>
<div id="chapter-3" class="accordion-collapse collapse" aria-labelledby="heading-3" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-4" aria-expanded="false" aria-controls="chapter-4">
Chapter 4 Storing Data (Firebase Databases)
</button>
</h2>
<div id="chapter-4" class="accordion-collapse collapse" aria-labelledby="heading-4" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-5" aria-expanded="false" aria-controls="chapter-5">
Chapter 5 - User Authentication
</button>
</h2>
<div id="chapter-5" class="accordion-collapse collapse" aria-labelledby="heading-5" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- reviews list -->
<section id="reviews" class="bg-light">
<div class="container-lg">
<div class="text-center">
<h2><i class="bi bi-stars"></i>Book Reviews</h2>
<p class="lead">What my students have said about the book...</p>
</div>
<div class="row justify-content-center my-5">
<div class="col-lg-8">
<div class="list-group">
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- contact form -->
<!-- form-control, form-label, form-select, input-group, input-group-text -->
<section id="contact">
<div class="container-lg">
<div class="text-center">
<h2>Get in Touch</h2>
<p class="lead">Questions to ask? Fill out the form to contact me directly...</p>
</div>
<div class="row justify-content-center my-5">
<div class="col-lg-6">
<form>
<label for="email" class="form-label">Email address:</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-envelope-fill"></i>
</span>
<input type="email" class="form-control" id="email" placeholder="e.g. mario@example.ocm">
<!-- tooltip -->
<span class="input-group-text">
<span class="tt" data-bs-placement="bottom" title="Enter an email address we can reply to.">
<i class="bi bi-question-circle text-muted"></i>
</span>
</span>
</div>
<label for="name" class="form-label">Name:</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-person-fill"></i>
</span>
<input type="text" class="form-control" id="name" placeholder="e.g. Mario">
<!-- tooltip -->
<span class="input-group-text">
<span class="tt" data-bs-placement="bottom" title="Pretty self explanatory really...">
<i class="bi bi-question-circle text-muted"></i>
</span>
</span>
</div>
<label for="subject" class="form-label">What is your question about?</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-chat-right-dots-fill"></i>
</span>
<select class="form-select" id="subject">
<option value="pricing" selected>Pricing query</option>
<option value="content">Content query</option>
<option value="other">Other query</option>
</select>
</div>
<div class="form-floating mb-4 mt-5">
<textarea id="query" class="form-control" style="height: 140px"></textarea>
<label for="query">Your query...</label>
</div>
<div class="mb-4 text-center">
<button type="submit" class="btn btn-secondary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- get updates / modal trigger -->
<section class="bg-light">
<div class="container">
<div class="text-center">
<h2>Stay in The Loop</h2>
<p class="lead"> Get the latest updates as they happen...</p>
</div>
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<p class="text-muted my-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit officia odio, quo dolore quis debitis similique quod blanditiis eos voluptatum autem et dolorum exercitationem ratione nobis sint mollitia enim qui.
</p>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#reg-modal">
Register for Updates
</button>
</div>
</div>
</div>
</section>
<!-- modal itself -->
<div class="modal fade" id="reg-modal" tabindex="-1" aria-labelledby="modal-title" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title">Get the Latest Updates</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, neque fugit odit velit quibusdam eligendi, commodi quam dolore, esse numquam iusto tenetur omnis ea cum sit rem doloribus ratione minus.</p>
<label for="modal-email" class="form-label">Your email address:</label>
<input type="email" class="form-control" id="modal-email" placeholder="e.g. mario@example.com">
</div>
<div class="modal-footer">
<button class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<!-- offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar" aria-labelledby="sidebar-label">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebar-label">My Other Books</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae magnam sed fugiat. Earum incidunt provident voluptatibus praesentium eveniet rerum esse nostrum, inventore, nulla illo eius voluptas animi quidem veritatis iste!</p>
<!-- dropdown -->
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="book-dropdown" data-bs-toggle="dropdown">
Choose a book title
</button>
<ul class="dropdown-menu" aria-labelledby="book-dropdown">
<li><a href="#" class="dropdown-item">Become a React Superhero</a></li>
<li><a href="#" class="dropdown-item">Conquering Vue.js</a></li>
<li><a href="#" class="dropdown-item">Levelling up Your Next.js</a></li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script>
const tooltips = document.querySelectorAll('.tt');
tooltips.forEach(t => {
new bootstrap.Tooltip(t);
});
</script>
</body>
</html>#19 – Customizing Bootstrap
in this Bootstrap tutorial I’ll show you how we can install Bootstrap locally and customize theme variables (like colors) using SASS.
- SASS
- Node.js – 使用 NPM 安裝 Bootstrap
- Terminal(終端機)
- npm init，產生 package.json
- npm install bootstrap，安裝 Bootstrap、在 package.json 的 dependencies 地方會顯示安裝好的 bootstrap名稱、版本
- node_modules/bootstrap/dist/css/bootstrap.min.css – 可以像 CDN 直接使用
- 創立一個新的資料夾以及檔案 sass/main.scss，而不是直接修改 bootstrap/scss/_variables.scss，防止變更到原始的 bootstrap 檔案
- custom variables、import bootstrap
- 安裝 Live Sass Compiler
- 打開 Settings 搜尋 live sass format、點擊 Live Sass Compile，Settings:Formats 編輯新增以下程式碼
- 新增 custom-theme-colors
- 使用 map-merge 合併原本和新增的變數顏色
- 5.0.x 與 5.1.x 有所更動
// index.html
<!DOCTYPE html>
<html lang="en zh-hant">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> -->
<link rel="stylesheet" href="css/main.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<title>Net Ninja Pro - the Book</title>
<style>
section {
padding: 60px 0;
}
</style>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-xxl">
<a href="#intro" class="navbar-brand">
<span class="fw-bold text-secondary">
<i class="bi bi-book-half"></i>
Net Ninja Pro - the Book
</span>
</a>
<!-- toggle button for mobile nav -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navbar links -->
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#topics">About The Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get in Touch</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item ms-2 d-none d-md-inline">
<a class="btn btn-secondary" href="#pricing">buy now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- main image & intro text -->
<section id="intro">
<div class="container-lg">
<div class="row justify-content-center align-items-center">
<div class="col-md-5 text-center text-md-start">
<h1>
<div class="display-2">Black-Belt</div>
<div class="display-5 text-muted">Your Coding Skills</div>
</h1>
<p class="lead my-4 text-muted">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<a href="#pricing" class="btn btn-secondary btn-lg">Buy Now</a>
<!-- open sidebar / offcanvas -->
<a href="#sidebar" class="d-block mt-3" data-bs-toggle="offcanvas" role="button" aria-controls="sidebar">Explore my other books</a>
</div>
<div class="col-md-5 text-center d-none d-md-block">
<!-- tooltip -->
<span class="tt" data-bs-placement="bottom" title="Net Ninja Book Cover">
<img class="img-fluid" src="/assets/ebook-cover.png" alt="ebook cover">
</span>
</div>
</div>
</div>
</section>
<!-- pricing plans -->
<section id="pricing" class="bg-light mt-5">
<div class="container-lg">
<div class="text-center">
<h2>Pricing Plans</h2>
<p class="lead text-muted">Choose a pricing plan to suit you.</p>
</div>
<div class="row my-5 align-items-center justify-content-center g-0">
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Starter Edition</h4>
<p class="lead card-subtitle">eBook download only</p>
<p class="display-5 my-4 text-primary fw-bold">$12.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-9 col-lg-4">
<div class="card border-primary border-2">
<div class="card-header text-center text-primary">Most Popular</div>
<div class="card-body text-center py-5">
<h4 class="card-title">Complete Edition</h4>
<p class="lead card-subtitle">eBook download & all updates</p>
<p class="display-4 my-4 text-primary fw-bold">$18.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
<div class="col-8 col-lg-4 col-xl-3">
<div class="card border-0">
<div class="card-body text-center py-4">
<h4 class="card-title">Ultimate Edition</h4>
<p class="lead card-subtitle">download, updates & extras</p>
<p class="display-5 my-4 text-primary fw-bold">$24.99</p>
<p class="card-text mx-5 text-muted d-none d-lg-block">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
<a href="#" class="btn btn-outline-primary btn-lg mt-3">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- topics at a glance -->
<section id="topics">
<div class="container-md">
<div class="text-center">
<h2>Inside the Book...</h2>
<p class="lead text-muted">A quick glance at the topics you'll learn</p>
</div>
<div class="row my-5 g-5 justify-content-around align-items-center">
<div class="col-6 col-lg-4">
<img src="/assets/kindle.png" class="img-fluid" alt="ebook">
</div>
<div class="col-lg-6">
<!-- accordion -->
<div class="accordion" id="chapters">
<div class="accordion-item">
<h2 class="accordion-header" id="heading-1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-1" aria-expanded="true" aria-controls="chapter-1">
Chapter 1 - Your First Web Page
</button>
</h2>
<div id="chapter-1" class="accordion-collapse collapse show" aria-labelledby="heading-1" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-2" aria-expanded="false" aria-controls="chapter-2">
Chapter 2 - Mastering CSS
</button>
</h2>
<div id="chapter-2" class="accordion-collapse collapse" aria-labelledby="heading-2" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-3" aria-expanded="false" aria-controls="chapter-3">
Chapter 3 - The Power of JavaScript
</button>
</h2>
<div id="chapter-3" class="accordion-collapse collapse" aria-labelledby="heading-3" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-4" aria-expanded="false" aria-controls="chapter-4">
Chapter 4 Storing Data (Firebase Databases)
</button>
</h2>
<div id="chapter-4" class="accordion-collapse collapse" aria-labelledby="heading-4" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="heading-5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#chapter-5" aria-expanded="false" aria-controls="chapter-5">
Chapter 5 - User Authentication
</button>
</h2>
<div id="chapter-5" class="accordion-collapse collapse" aria-labelledby="heading-5" data-bs-parent="#chapters">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit veritatis ipsam eaque officiis quaerat! Eligendi laborum cupiditate sed corporis animi voluptatem adipisci, ex est ducimus facilis commodi. A, atque fuga?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nostrum aliquam, aut iure optio modi assumenda consequuntur recusandae minima possimus aspernatur obcaecati incidunt necessitatibus. Ea corporis rerum veniam! Perspiciatis, aperiam!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- reviews list -->
<section id="reviews" class="bg-altlight">
<div class="container-lg">
<div class="text-center">
<h2><i class="bi bi-stars text-altdark"></i>Book Reviews</h2>
<p class="lead">What my students have said about the book...</p>
</div>
<div class="row justify-content-center my-5">
<div class="col-lg-8">
<div class="list-group">
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill text-altdark"></i>
<i class="bi bi-star-fill text-altdark"></i>
<i class="bi bi-star-fill text-altdark"></i>
<i class="bi bi-star-fill text-altdark"></i>
<i class="bi bi-star-fill text-altdark"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
<div class="list-group-item py-3">
<div class="pb-2">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<h5 class="mb-1">A must buy for every aspiring web dev</h5>
<p class="mb-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse harum perspiciatis ab commodi quis totam omnis voluptatum, deleniti iure aliquid obcaecati dignissimos earum neque velit itaque eos accusantium expedita. Placeat.</p>
<small>Review by Mario</small>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- contact form -->
<!-- form-control, form-label, form-select, input-group, input-group-text -->
<section id="contact">
<div class="container-lg">
<div class="text-center">
<h2>Get in Touch</h2>
<p class="lead">Questions to ask? Fill out the form to contact me directly...</p>
</div>
<div class="row justify-content-center my-5">
<div class="col-lg-6">
<form>
<label for="email" class="form-label">Email address:</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-envelope-fill"></i>
</span>
<input type="email" class="form-control" id="email" placeholder="e.g. mario@example.ocm">
<!-- tooltip -->
<span class="input-group-text">
<span class="tt" data-bs-placement="bottom" title="Enter an email address we can reply to.">
<i class="bi bi-question-circle text-muted"></i>
</span>
</span>
</div>
<label for="name" class="form-label">Name:</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-person-fill"></i>
</span>
<input type="text" class="form-control" id="name" placeholder="e.g. Mario">
<!-- tooltip -->
<span class="input-group-text">
<span class="tt" data-bs-placement="bottom" title="Pretty self explanatory really...">
<i class="bi bi-question-circle text-muted"></i>
</span>
</span>
</div>
<label for="subject" class="form-label">What is your question about?</label>
<div class="input-group mb-4">
<span class="input-group-text">
<i class="bi bi-chat-right-dots-fill"></i>
</span>
<select class="form-select" id="subject">
<option value="pricing" selected>Pricing query</option>
<option value="content">Content query</option>
<option value="other">Other query</option>
</select>
</div>
<div class="form-floating mb-4 mt-5">
<textarea id="query" class="form-control" style="height: 140px"></textarea>
<label for="query">Your query...</label>
</div>
<div class="mb-4 text-center">
<button type="submit" class="btn btn-secondary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- get updates / modal trigger -->
<section class="bg-light">
<div class="container">
<div class="text-center">
<h2>Stay in The Loop</h2>
<p class="lead"> Get the latest updates as they happen...</p>
</div>
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<p class="text-muted my-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit officia odio, quo dolore quis debitis similique quod blanditiis eos voluptatum autem et dolorum exercitationem ratione nobis sint mollitia enim qui.
</p>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#reg-modal">
Register for Updates
</button>
</div>
</div>
</div>
</section>
<!-- modal itself -->
<div class="modal fade" id="reg-modal" tabindex="-1" aria-labelledby="modal-title" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title">Get the Latest Updates</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, neque fugit odit velit quibusdam eligendi, commodi quam dolore, esse numquam iusto tenetur omnis ea cum sit rem doloribus ratione minus.</p>
<label for="modal-email" class="form-label">Your email address:</label>
<input type="email" class="form-control" id="modal-email" placeholder="e.g. mario@example.com">
</div>
<div class="modal-footer">
<button class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<!-- offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar" aria-labelledby="sidebar-label">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebar-label">My Other Books</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae magnam sed fugiat. Earum incidunt provident voluptatibus praesentium eveniet rerum esse nostrum, inventore, nulla illo eius voluptas animi quidem veritatis iste!</p>
<!-- dropdown -->
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="book-dropdown" data-bs-toggle="dropdown">
Choose a book title
</button>
<ul class="dropdown-menu" aria-labelledby="book-dropdown">
<li><a href="#" class="dropdown-item">Become a React Superhero</a></li>
<li><a href="#" class="dropdown-item">Conquering Vue.js</a></li>
<li><a href="#" class="dropdown-item">Levelling up Your Next.js</a></li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script>
const tooltips = document.querySelectorAll('.tt');
tooltips.forEach(t => {
new bootstrap.Tooltip(t);
});
</script>
</body>
</html>// sass/main.scss
// custom variables
$primary: #c29938;
// import bootstrap
@import '../node_modules/bootstrap/scss/bootstrap';
// Live Sass Compile,Setting: Formats
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/css"
}
// {
// "format": "expanded",
// "extensionName": ".css",
// "savePath": null
// }
]// sass/main.scss - 新增 custom-theme-colors 並合併到 theme-colors
// custom variables
$primary: #c29938;
$light: #fbf5e5;
// import the functions & variables
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
$custom-theme-colors: (
"altlight": #f2ebfa,
"altdark": #522192
);
$theme-colors: map-merge($theme-colors, $custom-theme-colors);
// bootstrap 5.1.x version
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
// import bootstrap
@import '../node_modules/bootstrap/scss/bootstrap';
#20 – Tabs
In this final Bootstrap 5 tutorial I’ll show you how to use the tabs component.
// tabs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/main.min.css">
<title>Tabs</title>
</head>
<body>
<!-- tabs -->
<div class="container my-5">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active p-3" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<h2>Home</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur laboriosam corporis harum autem! Veritatis expedita delectus voluptatibus tenetur, quis, ab ducimus nisi voluptatum a libero omnis id, aut quam quasi!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem suscipit soluta rerum quae, nemo, cumque neque amet excepturi vero a ut facere voluptate nam doloribus? Saepe libero nesciunt delectus eius?</p>
</div>
<div class="tab-pane fade p-3" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<h2>Profile</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo eos dolorem eaque mollitia veniam eius delectus voluptatibus ut maxime assumenda, consequuntur dolores nostrum rerum a ab esse dolore et optio?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero delectus veniam est harum eos consectetur, enim beatae culpa assumenda quo officiis numquam explicabo aperiam dolore, debitis in asperiores odit! Excepturi.</p>
</div>
<div class="tab-pane fade p-3" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<h2>Contact</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus reiciendis pariatur sit quasi quas, odio libero optio amet atque ab? Non voluptatum sint perferendis in facere repellat aut vero sed.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad quo mollitia minus nesciunt asperiores voluptate minima eaque, sed rerum, quasi dicta suscipit. Aspernatur fuga placeat neque consectetur, iusto corporis ex.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>