[BootStrap] Bootstrap의 모든 것

 

목차

https://www.w3schools.com/bootstrap5/index.php

 

 

Bootstrap 5 Tutorial

https://getbootstrap.com/docs/5.2/getting-started/introduction/

Get started with Bootstrap

---

 

 

---

1. Header (상단 네비게이션)

부트스트랩을 이용하여 상단 헤더를 작성하려면

아래애 나와있는 navigation bar의 템플릿을 활용해야 한다.

 

(1) 왼쪽 상단에 있는 블로그 제목

navbar-brand

 

 

 

(2) navigation bar의 콘텐츠를 그룹화 혹은 감출 수 있다.

collapse.navbar-collapse

 

 

 

(3) navbar-nav

 

 

 

(4) navigation bar의 각 요소들 (회원가입, 로그인, ..)

nav-item

 

 

 

(5) nav-item 오른쪽으로 밀기

mr-auto

1번째 오른쪽에 있는 요소들을 맨 오른쪽으로 밀어버리기

<div class="d-flex">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

nav-item

nav-item

nav-item

 

 

 

(6) nav-item 왼쪽으로 밀기

ml-auto

3번째 왼쪽에 있는 요소들을 맨 왼쪽으로 밀어버리기

nav-item

nav-item

nav-item

 

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

 

 

 

(7) nav-item 맨 아래, 맨 위쪽으로 각각 밀어버리기

 

<div class="d-flex align-items-start flex-column" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>
 
<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">Flex item</div>
</div>

https://getbootstrap.com/docs/4.0/utilities/flex/

Flex

 

 

 

(8) dropDown 메뉴

nav-link dropdown-toggle : 상위 메뉴

dropdown-menu > dropdown-item : 하위메뉴

 

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">관리자</a>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#voteModal" data-toggle="modal">투표만들기</a>
        <a class="dropdown-item" href="#">차트보기</a>
        <a class="dropdown-item" href="#">회원관리</a>
    </div>
</li>

 

 

 

 

 

---

2. 글씨 사이즈

<a class="h1" href="#"> Hello! </a>

 

---

3. 그림자 효과

class = "Small, Regular,Larger 중 1개)  shadow"

 

https://getbootstrap.com/docs/5.2/utilities/shadows/

Shadows

 

---

4. 하이퍼링크 밑줄 없애기

class="text-decoration-none"

https://ko.code-paper.com/whatever/examples-bootstrap-link-no-underline

부트 스트랩 링크 밑줄 없음 - Whatever 샘플 코드

 

---

5. 버튼

https://getbootstrap.com/docs/4.0/components/buttons/

Buttons