부트스트랩 프레임워크를 사용하는 방법은 무엇입니까? 부트스트랩 프레임워크 사용법 소개

Bootstrap은 Twitter에서 가장 인기 있는 프런트 엔드 프레임워크 중 하나입니다. Bootstrap 프레임워크는 HTML, CSS 및 JavaScript를 기반으로 하며, 간단하고 유연하여 웹 개발 속도를 높여줍니다. 그러나 많은 친구들이 방법을 모릅니다. 부트스트랩 프레임워크를 사용하세요 다음은 무엇인가요? 이 글에서는 부트스트랩 프레임워크를 사용하는 방법을 소개합니다.

더 이상 고민하지 말고 바로 본문으로 들어가겠습니다~

(무료 강좌 추천: 부트스트랩 튜토리얼)

1 , Bootstrap에 사용되는 일부 HTML 요소 및 CSS 속성은 페이지를 HTML5 문서 유형으로 설정해야 합니다. 즉, 페이지 상단에 "8b05045a5be5764f313ed5b9168a17e6"을 추가해야 합니다

2 레이아웃 컨테이너: 부트스트랩은 페이지 콘텐츠 및 그리드 시스템에 대해 .container 또는 컨테이너-유체(전체 뷰포트를 차지하는 컨테이너) 컨테이너를 래핑해야 합니다.

3 그리드 시스템: 부트스트랩은 최대 12개의 열이 있는 유동 그리드 시스템을 제공합니다. 행을 나타내는 .row와 너비를 나타내는 열인 .col-xs-4를 통해 그리드 레이아웃을 빠르게 생성할 수 있습니다.

4 , 부트스트랩 타이포그래피 및 링크 스타일은 기본 전역 스타일을 설정합니다.

font-size는 14px로, line-height는 1.428로 설정되었습니다.

e388a4556c0f65e1904146cc1a846bee(단락) 요소도 아래쪽 여백이 줄 높이의 1/2(예: 10px)로 설정되어 있습니다.

기본 스타일

Typesetting:

1. 제목, .h1~.h6 클래스를 사용하여 인라인 속성의 텍스트에 제목 스타일을 지정할 수 있습니다. 요소 태그 부제목.

본문 텍스트: .lead 클래스는 단락을 강조 표시합니다.

2. 인라인 텍스트의 경우 f920514e6447cf1d171079d1371f007f 라벨은 주석 텍스트, 823db3943044a0a9a620ada8d4b1d965delete, 2e44d2d3284d23d932e1fd85f3d4cf3auseless, 426be984ffbbb815d7d88e3543a85d91insert, 88f336217b3880082bb52d49b5de60a5underline, d015d241ae6d34c34210679b5204fe85small(상위 컨테이너의 글꼴 크기)을 나타냅니다. 85%), 8e99a69fbe029cd4e2b854e244eab143강조, 907fae80ddef53131f3292ee4f81644b이탤릭체.

3. 텍스트 정렬 클래스, text-left, text-center, text-justify, text-nowrap

4. 텍스트 대문자화 클래스, text-소문자, 텍스트-대문자화

5. 약어 클래스, 8a7974376be5f6c00c121222b727adb9 요소에 대한 제목 속성을 설정하고 .initialism 클래스를 사용하여 글꼴 크기를 설정합니다. 약간 작아집니다. 예: c64e4650a32feb23ab73f713310043fdattr4f2d06a7b2d26e0ad682bc6a608fa811

6. 주소는 일상적인 사용을 위한 형식으로 표시됩니다. 필요한 스타일을 유지하려면 줄 끝에 0c6dc11e160d3b678d68754cc175188a를 추가하세요.

7. 인용문 스타일을 표시하려면 HTML 요소를 b8a712a75cab9a5aded02f74998372b4 직접 인용할 때에는 e388a4556c0f65e1904146cc1a846bee 태그를 사용하는 것이 좋습니다.

8. 목록, 스타일이 지정되지 않은 클래스는 기본 목록 스타일을 제거합니다. 스타일과 왼쪽 여백이 있는 요소 집합입니다(직계 하위 항목만 해당). list-inline 클래스는 display: inline-block을 설정합니다. 그리고 모든 요소를 ​​같은 줄에 배치하려면 약간의 패딩을 추가하세요. dl-horizontal 클래스는 5c69336ffbc20d23018e48b396cdd57a 내의 문구와 설명을 한 줄로 정렬합니다.

Code:

ffbe95d20f3893062224282accb13e8f 태그는 인라인 스타일 코드 조각을 감쌉니다.

5e4e803d53d659f332070b5d4aa430db 태그는 키보드를 통해 사용자가 입력한 내용을 표시합니다.

e03b848252eb9375d56be284e690e873 . 사전 스크롤 가능 클래스를 사용하면 세로 스크롤 막대를 최대 350px까지 설정할 수 있습니다.

b7f90f73cad438258bf67e62f79b2113 태그 태그 변수

162cd570ab1483e383d78dcb7f452f7c 태그는 프로그램에서 출력되는 내용입니다.

테이블:

.table 클래스는 기본 스타일을 지정하고,

.table-striped 클래스는 스트라이프 스타일,

.table-bordered 클래스는 테두리 스타일,

.table-hover 클래스에는 마우스 호버 스톱 스타일,

.테이블 응축형 컴팩트 스타일.

상태 클래스(행 또는 셀 설정 색상): 활성, 성공, 정보, 경고, 정보.

작은 화면 장치(768px 미만)에서 가로로 스크롤되는 반응형 테이블을 생성하려면 .table-반응형 요소 내에 .table 요소를 래핑하세요. 화면 너비가 768px보다 크면 가로 스크롤 막대가 사라집니다.

양식:

1. 기본 인스턴스:

모든 d5fd7aea971a85678ba271703566ebfd, 4750256ae76b6b9d804861d8f69e79d3 221f08282418e2996498697df914ce4e 요소의 너비 속성은 기본적으로 width: 100%로 설정됩니다.

레이블 요소와 이전에 언급한 컨트롤을 최상의 배열은 .form-group에서 얻을 수 있습니다.

양식 그룹을 입력 상자 그룹과 직접 혼합하지 마세요. 입력 상자 그룹을 양식 그룹에 중첩하는 것이 좋습니다.

form-group, input-group, control-group,

2. 인라인 양식:

ff9c23ada1bcecdd1a0fb5d5a0f18437 요소에 .form-inline 클래스를 추가하면 해당 콘텐츠가 왼쪽 정렬되도록 할 수 있습니다. 인라인 블록 수준의 컨트롤. 뷰포트 너비가 768px 이상인 경우에만 적용됩니다. 뷰포트 너비가 더 작으면 양식이 축소됩니다.

인라인 형식의 라디오/다중 선택 상자 컨트롤의 너비를 width: auto로 설정합니다.

각 입력 컨트롤에 대한 레이블 레이블을 설정하지 않으면 화면 판독기가 이를 올바르게 인식하지 못합니다. 이러한 인라인 양식의 경우 레이블에 .sr-only 클래스를 설정하여 숨길 수 있습니다.

3. 가로로 배열된 형태 : 그리드 시스템에서 행처럼 동작하도록 .form-horizontal 클래스를 양식에 추가하여 .form-group의 동작을 변경합니다.

4. : .radio, .radio-inline, .checkbox, .checkbox-inline.

5. 정적 컨트롤 : 가로 레이아웃 양식에서 일반 텍스트 줄과 레이블 요소를 같은 줄에 배치해야 하는 경우 .form-control-static 클래스를 e388a4556c0f65e1904146cc1a846bee 요소에 추가하기만 하면 됩니다.

6. 컨트롤 상태

.disabled 클래스는 컨트롤을 비활성화합니다. 비활성화가 2b5469ab79cf842344327415c3b3bb95로 설정되면 포함된 모든 컨트롤이 비활성화됩니다.

a 태그는 이에 영향을 받지 않습니다.

readonly 속성은 이러한 컨트롤의 상위 요소에 대한 사용자 입력

.has-warning, .has-error 또는 .has-success 클래스를 금지할 수 있습니다. 이 요소에 포함된 모든 .control-label, .form-control 및 .help-block 요소는 이러한 유효성 검사 상태에 대한 스타일을 허용합니다.

확인 상태에 대한 추가 아이콘을 입력 상자에 추가할 수도 있습니다(라벨 태그에 따라 다름). 해당 .has-feedback 클래스를 설정하고 올바른 아이콘을 추가하기만 하면 됩니다.

7. 컨트롤 크기

.input-lg 및 .input-sm 유사한 클래스를 통해 컨트롤의 높이를 설정할 수 있고, .col-lg-* 및 유사한 클래스를 통해 컨트롤의 너비를 설정할 수 있습니다

.form을 추가하면 group-lg 또는 .form-group-sm 클래스를 사용하여 .form-horizontal로 묶인 레이블 요소 및 양식 컨트롤의 크기를 빠르게 설정할 수 있습니다.

입력 상자나 그 상위 요소를 그리드 시스템의 열로 감싸면 너비를 쉽게 설정할 수 있습니다.

8. 보조 텍스트: 도움말 블록 클래스, 양식 컨트롤을 위한 "블록" 수준 보조 텍스트.

버튼:

1 기본 스타일, btn, btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, active

2. -링크, btn-block, 닫기

3, 크기 스타일, .btn-lg, .btn-sm, .btn-xs.

버튼 클래스는 3499910bf9dac5ae3c52d5ede7383485, bb9345e55eb71822850ff156dfde57c8 또는 d5fd7aea971a85678ba271703566ebfd 요소를 통해 적용할 수 있지만 각 브라우저에서 일치하는 그리기 효과를 얻으려면 bb9345e55eb71822850ff156dfde57c8 요소를 사용하는 것이 좋습니다.

이미지: 이미지 모양, img-rounded, img-circle, img-thumbnail, IE8은 CSS3의 둥근 모서리 속성을 지원하지 않습니다.

보조: 텍스트 음소거, 텍스트 기본, 텍스트 성공, 텍스트 정보, 텍스트 경고, 텍스트 위험 , bg-primary, bg-success, bg-info, bg-warning, bg-danger, 삼각형 기호, 캐럿 , 뜨다 , 중심

Component styles

Icons:

Glyphicon Halflings의 200개 글꼴 아이콘,

Icon 클래스는 빈 요소에만 적용할 수 있으며 다른 구성 요소와 함께 사용할 수 없습니다.

<span class="glyphicon glyphicon-search"></span>

메뉴:

드롭다운 메뉴 트리거와 드롭다운 메뉴를 모두 .dropdown으로 래핑합니다.

메뉴 정렬: 기본적으로 드롭다운 메뉴는 상위 요소의 상단과 왼쪽을 따라 자동으로 100% 배치됩니다. 너비. .dropdown-menu-right 클래스를 .dropdown-menu에 추가하면 메뉴를 오른쪽 정렬할 수 있습니다

메뉴 그룹화: 드롭다운 헤더 테이블 설명 항목, .disabled 테이블 비활성화 항목

팝업: .dropup 클래스는 다음을 수행할 수 있습니다. 트리거 만들기 드롭다운 메뉴가 위쪽으로 열립니다.

버튼 세트 :

Button group.btn-group, .btn-group-*을 통해 그룹의 버튼 크기를 지정합니다.

Button bar.btn-toolbar

버튼은 btn-group-vertical을 표시하기 위해 수직으로 쌓여 있습니다.

버튼 그룹은 양쪽 끝에서 정렬됩니다. btn-group-justified

Navigation:

tabs.nav-tabs 클래스는 .nav 기본 클래스에 따라 다릅니다.

Capsule 탭 페이지 .nav-pills 클래스, .nav-stacked 클래스를 추가하여 수직 스태킹으로 변경합니다.

.nav-justified 클래스를 사용하면 탭이나 캡슐이 동일한 너비로 표시되도록 쉽게 만들 수 있습니다.

navbar navbar-default

ff9c23ada1bcecdd1a0fb5d5a0f18437에 포함되지 않은 bb9345e55eb71822850ff156dfde57c8 요소의 경우 .navbar-btn을 추가한 후 탐색 모음에서 세로 중앙에 배치할 수 있습니다.

양식을 .navbar-form 안에 배치하면 수직 정렬이 잘 이루어질 수 있습니다.

.navbar-text

.navbar-link

.navbar-left 및 .navbar-right 도구 클래스에서는 탐색 링크, 양식 허용 , 버튼 또는 텍스트 정렬.

.navbar-fixed-top 클래스를 사용하면 탐색 바를 상단에 고정할 수 있습니다.

.navbar-fixed-bottom 클래스를 사용하면 탐색 바를 하단에 고정할 수 있습니다.

.navbar-static-top 클래스 페이지가 아래로 스크롤되어 사라집니다.

.navbar-inverse 클래스는 탐색 모음의 모양을 변경할 수 있습니다.

breadcrumb 계층적 탐색 구조(탐색 경로)를 만듭니다.

페이지:

페이지를 매기고 상황에 따라 페이지 번호에 .disabled 클래스와 .active 클래스를 사용합니다.

.pagination-lg 또는 .pagination-sm 클래스는 선택할 수 있는 추가 크기를 제공합니다.

pager 이전 페이지와 다음 페이지로 넘어가는 간단한 페이지입니다. 그리고 이전 수업과 다음 수업으로 표시할 수 있습니다.

Label: 라벨 라벨 기본 클래스, label-default, label-primary, label-success, label-info, label-warning, label-danger를 통해 라벨의 모양을 변경할 수 있습니다.
배지는 새로운 정보나 읽지 않은 정보 항목을 눈에 띄게 표시할 수 있습니다.

기타: 썸네일 , 프롬프트 상자 , 진행 표시줄 , 미디어 객체 등

맞춤형 스타일

BootStrap은 필요에 따라 사용자 정의할 수 있는 구성 요소와 jquery 플러그인을 제공합니다. 사용자는 Less 소스 코드를 직접 수정할 수도 있습니다.

위 내용은 부트스트랩 프레임워크를 사용하는 방법은 무엇입니까? 부트스트랩 프레임워크 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!