Written by java-style
on 2021-10-24

[ Bootstrap ] 다양한 기능 부트스트랩 위치와 Font Awesome

728x90

Bootstrap CSS 적용

bootstrap.min.css

bootstrap.min.css.map 파일을 /bootstrap4/css/에 넣고 link 함.

Bootstrap Javascript 적용

"Compiled CSS and JS" Download > jsDeliver 찾기 > 밑에 스트리트 3줄 찾아 전에 복사

Bootstrap Navbar 적용

Components 인덱스 Navbar 위치 원하는 나브 바 적용

728x90

Bootstrap 디자인 적용

Utilities > Colors 위치 원하는 디자인 적용

Bootstrap 웹사이트 모양 적용

1. bootstrap > 상단에 Examples > Blog 원하는 모양 적용

2. startbootstrap > Templates > Blog Home > Free Download 클릭

> zip 파일 압축 풀기 > index.html 클릭

> 메모장으로 연결 프로그램을 설정 후 소스보기 > 필요한 소스를 찾아 복사 붙여 넣기

728x90

Bootstrap Modal 팝업

bootstrap > Components > Modal 원하는 모달 선택

Bootstrap Button

bootstrap > Components > Button 원하는 버튼 선택

btn btn-secondary = gray 색상

btn-block btn-sm = 버튼을 작게 배치

728x90

Bootstrap Collapse 누르면 보이는

bootstrap > Components > Collapse 원하는 collapse 선택

Bootstrap Carousel 사진 슬라이드 회전

bootstrap > Components > Carousel 원하는 carousel 선택

Bootstrap Table

bootstrap > Components > Tables 원하는 테이블 선택

Table의 크기를 윈도 크기에 맞춰 반응하는 자체 스크롤 바를 추가하려면 아래 코드를 추가한다.

//선택지정

728x90

Font Awesome 아이콘 추가

start for free > e-mail > 키 코드를 복사 > 태그 안에 붙여 넣기 > Icons 복사 > 추가하기

Bootstrap Chart.js 투명도 차이 두기

rgba(255, 99, 132, 0.2)

rgba(255, 99, 132, 1.0)

가장 마지막에 있는 a속성의 float형 수에 차이를 두어 투명도를 조절해 경계선을 확실하게 한다.

728x90

from http://psy-er.tistory.com/53 by ccl(A) rewrite - 2021-10-24 01:01:56

Top