트위터의 부트 스트랩은 현재 가장 인기있는 프론트 엔드 프레임 워크입니다. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로합니다. 단순하고 유연하여 웹 개발을 더 빨리 만듭니다.
학습의 핵심 사항 :
1. 테이블
2. 버튼
이 레슨에서는 주로 부트 스트랩 테이블 및 버튼 기능에 대해 배우고 내장 CSS 정의를 통해 다양한 풍부한 효과를 표시합니다.
하나. 시트
Bootstrap은 개발자가 사용할 수있는 풍부한 테이블 스타일을 제공합니다.
1. 기본 형식
// 기본 테이블 스타일 <pable>을 구현합니다
참고 : Firebug를 통해 해당 CSS를 볼 수 있습니다.
2. 줄무늬 형태
// <tbody>의 선이 한 줄을 차례로 생성하고 단색 배경 효과 <pable>을 생성하십시오.
참고 : 테이블 효과는 기본 형식을 기반으로해야합니다.
3. 경계가있는 테이블
// 테이블에 테두리를 추가하십시오
4. 마우스를 가리십시오
// <tbody> 아래 테이블을 마우스를 옮기기 위해 배경 효과를 달성하기 위해 <table>
5. 상태 클래스
// 각 줄의 배경 스타일은 별도로 설정할 수 있습니다 <tr>
참고 : 선택할 수있는 5 가지 스타일이 있습니다.
스타일 설명 :
행이나 셀 위에 활성 마우스 호버링
성공은 성공적이거나 긍정적 인 행동에 서명합니다
정보는 일반적인 프롬프트 정보 또는 조치를 표시합니다
경고 로고 경고 또는 사용자주의가 필요합니다
위험은 위험하거나 잠재적 인 부정적인 행동을 나타냅니다
6. 줄을 숨기십시오
// 라인을 숨 깁니다 <TR>
7. 응답 테이블
// 테이블의 상위 요소에 대한 반응 형 양식, 768px 미만이며 테두리가 <body> 나타납니다.
둘. 단추
Bootstrap은 개발자가 사용할 수있는 풍부한 버튼을 많이 제공합니다.
1. 버튼으로 사용할 수있는 라벨 또는 요소
// 일반 버튼으로 변환 <a href = "###"> link </a> <버튼> 버튼 </button> <입력 유형 = "버튼"value = "input">
주목해야 할 세 가지가 있습니다.
(1). 구성 요소에 대해 주목해야 할 사항
버튼 클래스는 <a> 및 <button> 요소에 적용될 수 있지만 탐색 및 탐색 막대 구성 요소는 <버튼> 요소 만 지원합니다.
(2). 링크가 버튼으로 사용될 때 기록해야 할 사항
<a> 요소가 버튼으로 사용되며 다른 페이지를 연결하거나 현재 페이지의 다른 부분을 연결하는 대신 현재 페이지의 특정 기능을 트리거하는 데 사용되는 경우 Real = "Button"속성을 설정하십시오.
(3). 크로스 브라우저 디스플레이
우리가 요약 한 모범 사례는 각 브라우저에서 일치하는 드로잉 효과를 얻기 위해 가능할 때마다 <버튼> 요소를 사용하는 것이 좋습니다.
또한 Firefox <30의 브라우저에서 버그를 발견했는데, 이는 <input> 요소를 기반으로 생성 된 버튼에 대한 줄 높이 속성을 설정하지 못하며 Firefox 브라우저가 다른 버튼과 완전히 일치하지 않도록합니다.
2. 사전 정의 된 스타일
// 일반 정보 <버튼> 버튼 </button>
스타일 설명
BTN-DEFAULT 기본 스타일
BTN-SUCCESS 스타일
BTN-INFO 일반 정보 스타일
BTN 경고 경고 스타일
BTN 위험 위험한 스타일
BTN- 프라이팬 선호 스타일
BTN- 링크 링크 스타일
3. 크기
// 크기에서 작은 <버튼> 버튼 </button> <butty> 버튼 </button> <버튼> 버튼 </button> <버튼> 버튼 </button> 크기
4. 블록 레벨 버튼
// 블록 레벨 라인 브레이크 <버튼> 버튼 </button> <버튼> 버튼 </button>
5. 활성화 상태
// 버튼 <버튼> 버튼 </button>을 활성화합니다
6. 상태를 비활성화합니다
// 버튼 <버튼> 버튼 </button>을 비활성화합니다
위는 편집자가 소개 한 부트 스트랩 테이블 및 버튼 기능입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!