Bootstrap에 대한 자세한 지식 공유

1. 이미지를 모바일 반응형으로 만들기

사용: 이미지를 페이지 너비에 맞게 만듭니다.

작업: 이미지에 .img-반응 클래스 속성을 추가합니다.

<img  class="img-responsive lazy" src="/static/imghwm/default1.png" data-src="/images/cat.jpg" alt="Bootstrap에 대한 자세한 지식 공유" >

2. Bootstrap을 사용하여 텍스트 중앙에 배치

사용: 텍스트를 중앙에 배치합니다.

작업: 텍스트에 center-text 클래스 속성을 추가합니다.

<p>Hi, I'm Yamei.</p>

추가됨: .text-right, .text-left, .text-primary(텍스트 콘텐츠에 기본 클래스가 있음), .text-success, .text-muted(약화), .text - info, .text-warning, .text-danger

3. 부트스트랩 버튼 만들기

사용법: 부트스트랩 버튼 스타일 버튼을 만듭니다.

작업: 텍스트에 btn 클래스 속성을 추가합니다.

<button>Like</button>

효과는 다음과 같습니다:

4. 블록 요소 부트스트랩 버튼 만들기

사용: 블록 수준 버튼(상위 요소 너비의 100%까지 확장) ). 블록 수준 버튼을 만듭니다. 버튼은 페이지를 채우도록 늘어나고 블록 뒤의 모든 요소는 자동으로 다음 줄로 이동합니다(줄 바꿈).

원리는 아래와 같습니다(fcc의 그림):

작동: .btn 클래스 속성을 유지하고 .btn-block을 추가합니다.

<button>Like</button>

효과는 다음과 같습니다:

5. 부트스트랩 버튼 색상 레인보우 맛보기

사용: 클래스가 .btn-primary인 원본(파란색) 버튼을 추가합니다.

작업: .btn .btn-block 클래스 속성을 유지하고 .btn-primary을 추가합니다.

<button>Like</button>

효과는 다음과 같습니다:

보충: .btn-danger, .btn-warning(주의해서 작동하는 버튼), .btn-info(팝업되는 버튼) 정보) , .btn-default, .btn-link(버튼을 링크처럼 보이도록 하지만 버튼의 동작은 그대로 유지), .btn-success

                  크고, 작으며, 아주 작습니다

.disabled 비활성화된 버튼

.active 클릭할 때 버튼을 표시합니다

.active

*위 내용은 FCC에서 개인적으로 배운 내용입니다. 초보자를 위해 메모를 정리했습니다. 실수가 있으면 메시지를 남겨주세요. 지적해주세요~

[관련 영상 추천: 부트스트랩 튜토리얼]

위 내용은 Bootstrap에 대한 자세한 지식 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!