[ Bootstrap ] 다양한 기능 부트스트랩 위치와 Font Awesome
Bootstrap CSS 적용
bootstrap.min.css
bootstrap.min.css.map 파일을 /bootstrap4/css/에 넣고 link 함.
Bootstrap Javascript 적용
"Compiled CSS and JS" Download > jsDeliver 찾기 > 밑에 스트리트 3줄 찾아 </body> 전에 복사
Bootstrap Navbar 적용
Components 인덱스 Navbar 위치 원하는 나브 바 적용
Bootstrap 디자인 적용
Utilities > Colors 위치 원하는 디자인 적용
Bootstrap 웹사이트 모양 적용
1. bootstrap > 상단에 Examples > Blog 원하는 모양 적용
2. startbootstrap > Templates > Blog Home > Free Download 클릭
> zip 파일 압축 풀기 > index.html 클릭
> 메모장으로 연결 프로그램을 설정 후 소스보기 > 필요한 소스를 찾아 복사 붙여 넣기
Bootstrap Modal 팝업
bootstrap > Components > Modal 원하는 모달 선택
Bootstrap Button
bootstrap > Components > Button 원하는 버튼 선택
<button type=“button” class =“btn btn-secondary btn-block btn-sm”>btn btn-secondary = gray 색상
btn-block btn-sm = 버튼을 작게 배치
Bootstrap Collapse 누르면 보이는
bootstrap > Components > Collapse 원하는 collapse 선택
Bootstrap Carousel 사진 슬라이드 회전
bootstrap > Components > Carousel 원하는 carousel 선택
Bootstrap Table
bootstrap > Components > Tables 원하는 테이블 선택
Table의 크기를 윈도 크기에 맞춰 반응하는 자체 스크롤 바를 추가하려면 아래 코드를 추가한다.
<div class = "table-responsive">
<table class =
“table table-striped //줄무늬
table-bordered //테두리
table-hover ”> //선택지정
Font Awesome 아이콘 추가
start for free > e-mail > 키 코드를 복사 > <head> 태그 안에 붙여 넣기 > Icons 복사 > 추가하기
<i class="fab fa-google"></i>
Bootstrap Chart.js 투명도 차이 두기
rgba(255, 99, 132, 0.2)
rgba(255, 99, 132, 1.0)
가장 마지막에 있는 a속성의 float형 수에 차이를 두어 투명도를 조절해 경계선을 확실하게 한다.
'Back-End > Django' 카테고리의 다른 글
| [ Django ] 장고 프로젝트의 기본 (4) | 2021.10.25 |
|---|---|
| [ Bootstrap ] 부트스트랩 Navbar 나브 바 Container 컨테이너 Grid 그리드 활용 (0) | 2021.10.23 |
| [ Bootstrap ] 부트스트랩 Spacing Row Margin 마진 Padding 패딩 Card Modal 활용 (3) | 2021.10.22 |
| CSS Javascript Bootstrap 부트스트랩 웹사이트 접속 활용 방법 (2) | 2021.10.21 |
| HTML CSS Javascript 프로그래밍 (8) | 2021.10.20 |