Twitter의 Bootstrap은 현재 가장 인기 있는 프런트엔드 프레임워크입니다. Bootstrap은 HTML, CSS 및 JAVASCRIPT를 기반으로 하며 간단하고 유연하여 웹 개발을 더 빠르게 만듭니다.
학습 포인트:
1. 보조그룹 수업
2. 반응형 도구
이번 강의에서는 주로 부트스트랩의 보조 클래스와 반응형 도구에 대해 알아봅니다. 보조 클래스는 페이지 디자인을 돕기 위한 클래스 세트를 제공하는 반면, 반응형 도구는 미디어 쿼리를 사용하여 특정 콘텐츠를 표시하거나 숨깁니다.
1. 보조수업
Bootstrap은 레이아웃에 텍스트 색상 및 배경 색상 설정, 닫기 아이콘 표시 등에 사용되는 몇 가지 작은 보조 그룹 스타일을 제공합니다.
1. 시나리오 텍스트 색상
样式列表 样式名 描述 text-muted 柔和灰 text-primary 主要蓝 text-success 成功绿 text-info 信息蓝 text-warning 警告黄 text-danger 危险红 //各种色调的字体 <p class="text-muted">Bootstrap 视频教程</p> <p class="text-primary">Bootstrap 视频教程</p> <p class="text-success">Bootstrap 视频教程</p> <p class="text-info">Bootstrap 视频教程</p> <p class="text-warning">Bootstrap 视频教程</p> <p class="text-danger">Bootstrap 视频教程</p>
2. 장면 배경색
样式列表 样式名 描述 bg-primary 主要蓝 bg-success 成功绿 bg-info 信息蓝 bg-warning 警告黄 bg-danger 危险红 //各种色调的背景 <p class="bg-primary">Bootstrap 视频教程</p> <p class="bg-success">Bootstrap 视频教程</p> <p class="bg-info">Bootstrap 视频教程</p> <p class="bg-warning">Bootstrap 视频教程</p> <p class="bg-danger">Bootstrap 视频教程</p>
3.닫기버튼
<button type="button" class="close">×</button>
4.삼각형 기호
<span class="caret"></span>
5. 퀵플로트
<div class="pull-left">左边</div> <div class="pull-right">右边</div>
참고: 이 부동 소수점은 실제로 부동 소수점이지만 !important는 우선순위를 강화하는 데 사용됩니다.
6. 블록 수준 센터링
<div class="center-block">居中</div>
참고: 은 margin:x auto;로 설정되어 있습니다.
7. 수레 청소
<div class="clearfix"></div>
참고: 이 div는 청소해야 하는 플로팅 블록 앞에 배치할 수 있습니다.
8. 표시 및 숨기기
<div class="show">show</div> <div class="hidden">hidden</div>
2. 반응형 도구
미디어 쿼리를 수행할 때 다양한 화면 크기에 따라 일부 콘텐츠를 표시하고 숨겨야 하는 경우가 있습니다. 반응형 도구 클래스가 이 솔루션을 제공합니다.
//超小屏幕激活显示 <div class="visible-xs-block a">Bootstrap</div> //超小屏幕激活隐藏 <div class="hidden-xs a">Bootstrap</div>
참고: 표시되는 콘텐츠에는 블록, 인라인 블록, 인라인의 세 가지 변형이 있습니다.
위 내용은 에디터가 소개한 BootStrap 컴포넌트의 보조 그룹 클래스와 반응형 도구에 관한 내용입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
