☰
Kaigai Blog living abroad in my twenties

【My Study Load】Bootstrap

CSS Programming

How to start using it?

Install By Downloading files

  1. Download Zip File
  2. Add CSS Link
  3. Add JavaScript Link

1. Download Zip File

From here

2. Add CSS Link

<link rel="stylesheet" href="css/bootstrap.css">

3. Add JavaScript Link

<script src="js/bootstrap.bundle.js"></script>

Include via CDN

1. Add CSS Link

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />

2. Add JavaScript Link

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
    crossorigin="anonymous"></script>

Install via package manager

  1. Type “npm install” in terminal
  2. Type “npm install bootstrap@5.3.0-alpha1”
  3. Add CSS Link
  4. Add JavaScript Link

1. Type “npm install” in terminal

npm install

2. Type “npm install bootstrap@5.3.0-alpha1”

npm install bootstrap@5.3.0-alpha1

3. Add CSS Link

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">

4. Add JavaScript Link

<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>

Container

Bootstrap comes with three different containers

  • .container: which sets a max-width at each responsive breakpoint
  • .container-{breakpoint}, which is width: 100% until the specified breakpoint
  • .container-fluid, which is width: 100% at all breakpoints

Grid system

col (Most Basic)

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

The above example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent .container.

Row columns

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Use the responsive .row-cols-* classes to quickly set the number of columns that best render your content and layout. Whereas normal .col-* classes apply to the individual columns (e.g., .col-md-4), the row columns classes are set on the parent .row as a shortcut. With .row-cols-auto you can give the columns their natural width.

Gutter

<div class="container border">
    <div class="row gy-5 gx-0 row-cols-2">
        <div class="col"><div class="child">Col 1</div></div>
        <div class="col"><div class="child">Col 2</div></div>
        <div class="col"><div class="child">Col 2</div></div>
    </div>
</div>

gutter x is the side part, like outer x part of cols (gutter 5 is the maximum, no space from the border of parent element), though gutter y is the gap between cols of y offset. *(gutter 5 is the maximum gap between them)

COMPONENTS

Accordion

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

Things you need for the function

data-bs-target

<div>
    <div data-bs-target="#collapseExample">CLick Here</div>
    <p id="collapseExample">Here's detail</p>
</div>

This tells which element should it be associated with. （クリックした時に出てくるやつとの紐付けをIDを使って行う)

data-bs-toggle

data-bs-toggle="collapse"

This is used to toggle the visibility of a target element based on the user’s interaction with a control element.

aria-labelledby

<label id="username-label">Username:</label>
<input type="text" id="username-input" aria-labelledby="username-label">

It is used to provide a more accessible and usable experience for users who rely on assistive technologies such as screen readers.

aria-controls

<div>
    <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-controls="collapseTwo">CLick Here</button>
    <p id="collapseTwo">Here's detail</p>
</div>

It is typically used to indicate which element or elements are affected by a user interface control, such as a button or a link. This is also used by assistive technologies to enable users with disabilities to navigate and understand content more easily.

aria-expanded

aria-expanded="true"

This is an accessibility attribute in HTML that is used to indicate the current state of an element that can be expanded or collapsed, such as an accordion or dropdown menu. It communicates to assistive technologies whether the element is currently expanded (true) or collapsed (false).

class “collapse”

<p class="collapse"></p>

The “collapse” class in Bootstrap is used to hide or show content based on certain conditions. It can be applied to various HTML elements, such as divs, tables, and lists, to make them collapsible.

When the “collapse” class is added to an element, it will be initially hidden. To make it visible, you need to add the “show” class to the same element, or toggle the “show” class using JavaScript or jQuery.

The “collapse” class is often used in conjunction with other Bootstrap components such as the navbar, accordion, and modal to create interactive user interfaces.

data-bs-parent

<div class="accordion" id="myaccordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                data-bs-target="#collapseOne" aria-controls="collapseOne" aria-expanded="true">Accordion Item
                1</button>
        </h2>
        <div class="collapse" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#myaccordion">
            <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores doloribus mollitia corporis
                fuga itaque perferendis delectus hic nam, voluptate, dolor tempore quod eveniet vero
                exercitationem provident reprehenderit eum consequatur est!</div>
        </div>
    </div>
</div>

In an accordion component, there are multiple collapsible items (accordion items) that can be expanded or collapsed independently of each other. The data-bs-parent attribute is used to group these accordion items together and specify their common parent element, so that only one item can be expanded at a time.

Additional Function

accordion-flush

<div class="accordion accordion-flush" id="accordionFlushExample">
</div>

By default, accordion items in Bootstrap have a border and rounded corners, which can create a box-like appearance. Applying the “accordion-flush” class to the accordion component removes these borders and rounded corners, giving the accordion a more streamlined, modern appearance.

SCROLL SPY

Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.

How it works?

  • Scrollspy toggles the .active class on anchor (<a>) elements when the element with the id referenced by the anchor’s href is scrolled into view.
  • To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the or a custom element with a set height and overflow-y: scroll.
  • On the scrollable container, add data-bs-spy=”scroll” and data-bs-target=”#navId” where navId is the unique id of the associated navigation. Be sure to also include a tabindex=”0″ to ensure keyboard access.
  • As you scroll the “spied” container, an .active class is added and removed from anchor links within the associated navigation. Links must have resolvable id targets, otherwise they’re ignored. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>
<!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">
    <title>Document</title>
</head>
<body>
    <nav id="nav">
        <ul>
            <li><a href="#one"></a></li>
            <li><a href="#two"></a></li>
            <li><a href="#three"></a></li>
            <li><a href="#four"></a></li>
        </ul>
    </nav>
    <div data-bs-spy="scroll" data-bs-target="#nav" tabindex="0" style="overflow-y: scroll;">
        <div style="height: 100vh; width: 100%;" id="one"></div>
        <div style="height: 100vh; width: 100%;" id="two"></div>
        <div style="height: 100vh; width: 100%;" id="three"></div>
        <div style="height: 100vh; width: 100%;" id="four"></div>
    </div>
</body>
</html>

Others

Margin

// Margin for y which means top and bottom
my-5
// Margin for x which means left and right
mx-5

w-50

This is 50% of the width.

RELATED

【My Study Note】UX with meta tags...

HTML

【My Study Note】Creating a Database With MySQL...

MySQL

【My Study Load】JQUERY CODING...

JavaScript

【My Study Note】What is testing?...

JavaScript

HOME >  CSS >  【My Study Load】Bootstrap