3장: 부트스트랩 테이블 및 버튼 기능_javascript 기술
- WBOY원래의
- 2016-05-16 15:03:581593검색
Twitter의 Bootstrap은 현재 가장 인기 있는 프런트엔드 프레임워크입니다. Bootstrap은 HTML, CSS 및 JAVASCRIPT를 기반으로 하며 간단하고 유연하여 웹 개발을 더 빠르게 만듭니다.
학습 포인트:
1. 양식
2. 버튼
이번 강의에서는 주로 Bootstrap 테이블과 버튼 기능에 대해 배우고, 내장된 CSS 정의를 통해 다양하고 풍부한 효과를 표시해 보겠습니다.
1. 양식
Bootstrap은 개발자가 사용할 수 있는 풍부한 테이블 스타일을 제공합니다.
1. 기본형식
//实现基本的表格样式 <table class="table">
참고: Firebug를 통해 해당 CSS를 볼 수 있습니다.
2. 스트라이프 테이블
//让<tbody>里的行产生一行隔一行加单色背景效果 <table class="table table-striped">
참고: 테이블 효과는 기본 형식을 기반으로 해야 합니다.테이블
3. 테두리가 있는 테이블
//给表格增加边框 <table class="table table-bordered">
4. 마우스를 올리세요
//让<tbody>下的表格悬停鼠标实现背景效果 <table class="table table-hover">
5. 신분등급
//可以单独设置每一行的背景样式 <tr class="success">
참고: 총 5가지 스타일을 사용할 수 있습니다.
스타일 설명:
행이나 셀에 마우스를 올리면 활성화됨
성공은 성공 또는 긍정적인 행동을 나타냅니다.
info는 일반적인 프롬프트 정보 또는 작업을 식별합니다.
경고 표시는 경고를 표시하거나 사용자 주의가 필요합니다
위험은 위험하거나 잠재적으로 부정적인 행동을 의미합니다
6. 특정 행 숨기기
//隐藏行 <tr class="sr-only">
7. 반응형
//表格父元素设置响应式，小于 768px 出现边框 <body class="table-responsive">
2. 버튼
Bootstrap은 개발자가 사용할 수 있는 다양한 버튼을 제공합니다.
1. 버튼으로 사용할 수 있는 라벨 또는 요소
//转化成普通按钮 <a href="###" class="btn btn-default">Link</a> <button class="btn btn-default">Button</button> <input type="button" class="btn btn-default" value="input">
주의할 점은 세 가지입니다.
(1) 구성품 주의사항
버튼 클래스는 3499910bf9dac5ae3c52d5ede7383485 및 bb9345e55eb71822850ff156dfde57c8 요소에 적용될 수 있지만 탐색 및 탐색 모음 구성요소는 bb9345e55eb71822850ff156dfde57c8
(2)링크를 버튼으로 사용할 때 주의할 점
3499910bf9dac5ae3c52d5ede7383485 요소가 다른 페이지로 연결하거나 현재 페이지의 다른 부분으로 연결하는 데 사용되지 않고 현재 페이지에서 일부 기능을 실행하는 데 사용되는 경우 "버튼" 속성에 대해 role=을 설정해야 합니다.
(3) 크로스 브라우저 표시
저희가 요약한 모범 사례는 다음과 같습니다. 다양한 브라우저에서 일치하는 그리기 효과를 얻으려면 가능하면 bb9345e55eb71822850ff156dfde57c8 요소를 사용하는 것이 좋습니다.
또한 Firefox
2. 사전 정의된 스타일
//一般信息 <button class="btn btn-info">Button</button>
스타일 설명
btn-default 기본 스타일
btn-성공 성공스타일
btn-info 종합 정보 스타일
btn-경고 경고 스타일
btn-위험해 위험한 스타일
btn-1차 선호 스타일
btn-링크 링크 스타일
3. 사이즈
//从大到小的尺寸 <button class="btn btn-lg">Button</button> <button class="btn">Button</button> <button class="btn btn-sm">Button</button> <button class="btn btn-xs">Button</button>
4. 블록 수준 버튼
//块级换行 <button class="btn btn-block">Button</button> <button class="btn btn-block">Button</button>
5.활성화 상태
//激活按钮 <button class="btn active">Button</button>
6. 비활성화 상태
//禁用按钮 <button class="btn active disabled">Button</button>
위는 에디터가 소개한 부트스트랩 테이블과 버튼 기능입니다. 도움이 되셨으면 좋겠습니다!