▶ 부트스트랩 사용하는 법
1. getbootstrap.com 으로 접속한다.
2. 필요에 따라 CSS, JS링크를 복사해서 사용할 문서에 넣는다.(내가 하고 싶은 기능에 따라 아래에 있는 Popper도 추가해서 넣어준다.)
3. 옆에 있는 기능중 원하는 항목을 찾아 적용한다.
▶ 부트스트랩 사용시 유념할 점.
※ bootstrap은 12그리드 시스템을 제공한다. 예시)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body>
<div class="row">
<div class="col-md-4" style="background-color: red;">
A
</div>
<div class="col-md-4" style="background-color: yellow;">
B
</div>
<div class="col-md-4" style="background-color: blue;">
C
</div>
</div>
</body>
|
cs |
한 row(행)를 4,4,4 만큼 나누라는 뜻. 단위는 12이므로, 합이 12가 되게끔 다양한 비율로 구현할 수 있다.(5,2,5로 나누면 A,C구역이 훨씬 많은 비율을 차지하게 된다.)
col-md-5에서 md가 뜻하는바는 medium, 중간사이즈를 뜻함. 특정 크기보다 작아지면 A,B,C가 각각의 row를 차지하게끔 설정해놓은 것. 마찬가지로 sm을 입력하면 더 작은 사이즈에서 각각 row를 차지하게끔 설정할 수 있음. 그 픽셀에 대한 설명은 bootstrap의 Grid 설명에서 확인해 볼 수 있음.
이런식으로도 지정할 수 있음.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color: red;">
A
</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color: yellow;">
B
</div>
<div class="col-lg-3 col-md-4 col-sm-12" style="background-color: blue;">
C
</div>
</div>
</body>
|
cs |
lg사이즈, md사이즈, sm사이즈 일 때의 모습을 각각 정해줄 수 있다는 점.
※ 주요 Component의 UI기능 및 Form의 기능들.
[1] Alert : 사용자의 오류나 메시지를 전달할 때 사용. 종류에 따라 다른 색으로 다른 느낌을 전달할 수 있음.
https://getbootstrap.com/docs/5.2/components/alerts/
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
getbootstrap.com
[2] Badge : email이 왔다거나 게시판에서 새글을 표시할 때, 옆에 new, count 등을 표시할 때 쓰는 것.
https://getbootstrap.com/docs/5.2/components/badge/
Badges
Documentation and examples for badges, our small count and labeling component.
getbootstrap.com
[3] Breadcrumb : 메뉴 패스에 대한 경로를 표현. nav와 함께 우회 li를 쓰는 것이 특징
https://getbootstrap.com/docs/5.2/components/breadcrumb/
Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
getbootstrap.com
[4] Buttons : 버튼을 설정할 수 있다. outline을 설정하면 바깥선만 변경한다. 사이즈도 lg,md,sm으로 설정할 수 있다.
https://getbootstrap.com/docs/5.2/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
[5] Cards : 카드페이지를 만든다. (쇼핑몰에서 많이 활용하는 항목)
https://getbootstrap.com/docs/5.2/components/card/
Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
getbootstrap.com
[6] Carousel : 보통 첫화면 최상단에 페이지 넘기면서 소개하는 항목. 컨텐츠 내용을 주로 소개한다.
https://getbootstrap.com/docs/5.2/components/carousel/
Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
getbootstrap.com
[7] Collapse : 특정 내용을 보였다 안보였다 할 수 있는 기능(tistory의 글 접기 기능과 흡사하다.). id로 어떤 컨텐츠를 출력할지 구분하는 기능을 가지고 있다.
https://getbootstrap.com/docs/5.2/components/collapse/
Collapse
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
getbootstrap.com
[8] Dropdown : 목록을 아래로 내려서 출력하는 기능의 버튼을 추가. html의 SELECT와 유사한 것 같다.
https://getbootstrap.com/docs/5.2/components/dropdown/
Collapse
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
getbootstrap.com
[9] Forms : 웹사이트 이용할 때 정보를 입력하는 필트들 (input type text, checkbox, radio 등등) 을 하나로 묶어서 CSS를 적용하는 기능. Sizing 기능을 통해서 사이즈를 각각 다르게 설정할 수도 있다.
https://getbootstrap.com/docs/5.2/forms/form-control/
Form controls
Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.
getbootstrap.com
[10] Input group : 두가지 이상이 합쳐진 것(출력란과 input.) UI적으로 보기 편하게 만든 input.
https://getbootstrap.com/docs/5.2/forms/input-group/
Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
getbootstrap.com
[11] list group : 목록란을 UI적으로 보기 편하게 만든 Group. active 옵션을 주면 선택된 것 처럼 보이게 설정해놓을 수 있다.또한 badge와 함께 쓰면 new, count 기능을 함께 사용할 수 있다.
https://getbootstrap.com/docs/5.2/components/list-group/
List group
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
getbootstrap.com
[12] Modal : 특정화면을 누르면 팝업창이 뜨는 것. backdrop설정에 따라 밖에 눌러도 안닫히는 설정을 줄 수 있다. Modal창도 크기 설정이 가능하다.
https://getbootstrap.com/docs/5.2/components/modal/
Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
getbootstrap.com
[13] Nav : 메뉴만들때 많이 활용하는 기능, horizontal ,verticall 기능을 설정할 수 있다.
https://getbootstrap.com/docs/5.2/components/navs-tabs
Navs and tabs
Documentation and examples for how to use Bootstrap’s included navigation components.
getbootstrap.com
[14] Pagination : 앞페이지로 가지 뒷페이지로 가기(게시판 페이지 이동시)
https://getbootstrap.com/docs/5.2/components/pagination/
Pagination
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
getbootstrap.com
[14] Popovers : 특정 버튼을 클릭하면 설명이 뜨는 기능. 또한, 제목 옆에 '?' 아이콘을 넣어서 누르면 설명이 뜨게끔 만들 수도 있다.
https://getbootstrap.com/docs/5.2/components/popovers/
Popovers
Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
getbootstrap.com
[15] Tooltips : 마우스오버로 설명이 뜨는 기능.
https://getbootstrap.com/docs/5.2/components/tooltips/
Tooltips
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.
getbootstrap.com
[16] Progress : 진척 상황 표시 가능.
https://getbootstrap.com/docs/5.2/components/progress/
Progress
Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
getbootstrap.com
[17] Scrollspy : 스크롤이 달린 단락을 하나 만드는 기능. 어느 구간인지 옆 칸에 표시가능.
https://getbootstrap.com/docs/5.2/components/scrollspy/
Scrollspy
Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
getbootstrap.com
[18] Spinner : 로딩할 때 많이 쓰는 기능. 원이 돌아가는 기능, 깜빡거리는 기능 등을 다양한 공간에 쓰는 용도.
https://getbootstrap.com/docs/5.2/components/spinners/
Spinners
Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
getbootstrap.com
[19] Toasts : 시스템에서 특정 메시지를 알림 띄우는 기능. 토스트는 관련 좋은 플러그인들이 많아서 플러그인들을 많이쓰는편이다.
https://getbootstrap.com/docs/5.2/components/toasts/
Toasts
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
getbootstrap.com
※ 주요 Utility 기능들.
[1] Colors : 텍스트에 특정 색, 배경색을 줄 수 있는 utility. gradient로 음영을 줄 수도 있음.
https://getbootstrap.com/docs/5.2/utilities/colors/
Colors
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
getbootstrap.com
[2] Display : 컨텐츠를 특정 화면에서 보이고 안보이고를 관리하는 Utility. 페이지 사이즈별로 어떤 컨텐츠는 생략하고 보이게 조절가능.
https://getbootstrap.com/docs/5.2/utilities/display/
Display property
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
getbootstrap.com
[3] interactions : user-select-all 같은 경우는 한번의 클릭으로 전체 선택 가능. 값에 따라 일부선택, 선택불가로 만들 수 있음.
https://getbootstrap.com/docs/5.2/utilities/interactions/
Interactions
Utility classes that change how users interact with contents of a website.
getbootstrap.com
[4] text : user-select-all 같은 경우는 한번의 클릭으로 전체 선택 가능. 값에 따라 일부선택, 선택불가로 만들 수 있음. 텍스트 길 경우 생략할 수 있게도 만들 수 있음.
https://getbootstrap.com/docs/5.2/utilities/text/
Text
Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
getbootstrap.com
※ Bootstrap의 example에 들어가면 사용 예시를 볼 수 있다.
https://getbootstrap.com/docs/5.2/examples/
Examples
Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
getbootstrap.com
※ 개개인이 Bootstrap의 테마를 만들어서 공개하는 홈페이지가 있다.
https://themes.getbootstrap.com/
Bootstrap Themes Built & Curated by the Bootstrap Team.
Bootstrap Themes is a collection of the best templates and themes curated by Bootstrap’s creators. Our collection of templates include themes to build an admin, dashboard, landing page, e-commerce site, application, and more.
themes.getbootstrap.com
출처 : https://www.youtube.com/watch?v=5ETqQWvwXV4&t=2860s - 한시간만에 끝내는 부트스트랩 입문
댓글