Bootstrap은 Twitter에서 가장 인기 있는 프런트 엔드 프레임워크 중 하나입니다. Bootstrap 프레임워크는 HTML, CSS 및 JavaScript를 기반으로 하며, 간단하고 유연하여 웹 개발 속도를 높여줍니다. 그러나 많은 친구들이 방법을 모릅니다. 부트스트랩 프레임워크를 사용하세요 다음은 무엇인가요? 이 글에서는 부트스트랩 프레임워크를 사용하는 방법을 소개합니다.
더 이상 고민하지 말고 바로 본문으로 들어가겠습니다~(무료 강좌 추천: 부트스트랩 튜토리얼)
(단락) 요소도 아래쪽 여백이 줄 높이의 1/2(예: 10px)로 설정되어 있습니다.
기본 스타일
Typesetting:
본문 텍스트: .lead 클래스는 단락을 강조 표시합니다.
직접 인용할 때에는태그를 사용하는 것이 좋습니다.
8. 목록, 스타일이 지정되지 않은 클래스는 기본 목록 스타일을 제거합니다. 스타일과 왼쪽 여백이 있는 요소 집합입니다(직계 하위 항목만 해당). list-inline 클래스는 display: inline-block을 설정합니다. 그리고 모든 요소를 같은 줄에 배치하려면 약간의 패딩을 추가하세요. dl-horizontal 클래스는
내의 문구와 설명을 한 줄로 정렬합니다.
Code:
태그는 인라인 스타일 코드 조각을 감쌉니다.태그는 키보드를 통해 사용자가 입력한 내용을 표시합니다.
. 사전 스크롤 가능 클래스를 사용하면 세로 스크롤 막대를 최대 350px까지 설정할 수 있습니다. <p><br></p><var> 태그 태그 변수 <p><br></p><samp> 태그는 프로그램에서 출력되는 내용입니다. <p><br></p> <p>테이블: <strong></strong><br></p>.table 클래스는 기본 스타일을 지정하고, <p><br></p>.table-striped 클래스는 스트라이프 스타일, <p><br></p>.table-bordered 클래스는 테두리 스타일, <p><br></p>.table-hover 클래스에는 마우스 호버 스톱 스타일, <p><br></p>.테이블 응축형 컴팩트 스타일. <p><br></p>상태 클래스(행 또는 셀 설정 색상): 활성, 성공, 정보, 경고, 정보. <p><br></p>작은 화면 장치(768px 미만)에서 가로로 스크롤되는 반응형 테이블을 생성하려면 .table-반응형 요소 내에 .table 요소를 래핑하세요. 화면 너비가 768px보다 크면 가로 스크롤 막대가 사라집니다. <p><strong><br></strong></p> <p>양식: <strong></strong><br></p>1. 기본 인스턴스: <p></p>모든 <input>, <textarea> <select> 요소의 너비 속성은 기본적으로 width: 100%로 설정됩니다. <p><br></p>레이블 요소와 이전에 언급한 컨트롤을 최상의 배열은 .form-group에서 얻을 수 있습니다. <p><br></p>양식 그룹을 입력 상자 그룹과 직접 혼합하지 마세요. 입력 상자 그룹을 양식 그룹에 중첩하는 것이 좋습니다. <p><br></p>form-group, input-group, control-group, <p><br></p>2. 인라인 양식: <p></p><form> 요소에 .form-inline 클래스를 추가하면 해당 콘텐츠가 왼쪽 정렬되도록 할 수 있습니다. 인라인 블록 수준의 컨트롤. 뷰포트 너비가 768px 이상인 경우에만 적용됩니다. 뷰포트 너비가 더 작으면 양식이 축소됩니다. <p><br></p> <p>인라인 형식의 라디오/다중 선택 상자 컨트롤의 너비를 width: auto로 설정합니다. <br></p> <p>각 입력 컨트롤에 대한 레이블 레이블을 설정하지 않으면 화면 판독기가 이를 올바르게 인식하지 못합니다. 이러한 인라인 양식의 경우 레이블에 .sr-only 클래스를 설정하여 숨길 수 있습니다. <br></p> <p>3. 가로로 배열된 형태 : 그리드 시스템에서 행처럼 동작하도록 .form-horizontal 클래스를 양식에 추가하여 .form-group의 동작을 변경합니다. <br></p> <p>4. : .radio, .radio-inline, .checkbox, .checkbox-inline. <br></p> <p>5. 정적 컨트롤 : 가로 레이아웃 양식에서 일반 텍스트 줄과 레이블 요소를 같은 줄에 배치해야 하는 경우 .form-control-static 클래스를 <p> 요소에 추가하기만 하면 됩니다. <br></p> <p>6. 컨트롤 상태 <br></p> <p>.disabled 클래스는 컨트롤을 비활성화합니다. 비활성화가 <fieldset>로 설정되면 포함된 모든 컨트롤이 비활성화됩니다. <br></p> <p>a 태그는 이에 영향을 받지 않습니다. <br></p> <p>readonly 속성은 이러한 컨트롤의 상위 요소에 대한 사용자 입력 <br></p> <p>.has-warning, .has-error 또는 .has-success 클래스를 금지할 수 있습니다. 이 요소에 포함된 모든 .control-label, .form-control 및 .help-block 요소는 이러한 유효성 검사 상태에 대한 스타일을 허용합니다. <br></p> <p>확인 상태에 대한 추가 아이콘을 입력 상자에 추가할 수도 있습니다(라벨 태그에 따라 다름). 해당 .has-feedback 클래스를 설정하고 올바른 아이콘을 추가하기만 하면 됩니다. </p> <p>7. 컨트롤 크기<br></p> <p>.input-lg 및 .input-sm 유사한 클래스를 통해 컨트롤의 높이를 설정할 수 있고, .col-lg-* 및 유사한 클래스를 통해 컨트롤의 너비를 설정할 수 있습니다<br> </p> <p>.form을 추가하면 group-lg 또는 .form-group-sm 클래스를 사용하여 .form-horizontal로 묶인 레이블 요소 및 양식 컨트롤의 크기를 빠르게 설정할 수 있습니다. <br></p> <p>입력 상자나 그 상위 요소를 그리드 시스템의 열로 감싸면 너비를 쉽게 설정할 수 있습니다. <br></p> <p>8. 보조 텍스트: 도움말 블록 클래스, 양식 컨트롤을 위한 "블록" 수준 보조 텍스트. <br></p> <p><strong>버튼: </strong></p> <p>1 기본 스타일, btn, btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, active <br></p> <p>2. -링크, btn-block, 닫기 <br></p> <p>3, 크기 스타일, .btn-lg, .btn-sm, .btn-xs. <br></p> <p>버튼 클래스는 <a>, <button> 또는 <input> 요소를 통해 적용할 수 있지만 각 브라우저에서 일치하는 그리기 효과를 얻으려면 <button> 요소를 사용하는 것이 좋습니다. <br></p> <p><strong>이미지: </strong>이미지 모양, img-rounded, img-circle, img-thumbnail, IE8은 CSS3의 둥근 모서리 속성을 지원하지 않습니다. <br></p> <p><strong>보조: </strong>텍스트 음소거, 텍스트 기본, 텍스트 성공, 텍스트 정보, 텍스트 경고, 텍스트 위험 , bg-primary, bg-success, bg-info, bg-warning, bg-danger, 삼각형 기호, 캐럿 , 뜨다 , 중심 <strong><br></strong></p> <p><strong>Component styles</strong> <br></p> <p><strong>Icons: </strong> <br></p> <p>Glyphicon Halflings의 200개 글꼴 아이콘, <br></p> <p>Icon 클래스는 빈 요소에만 적용할 수 있으며 다른 구성 요소와 함께 사용할 수 없습니다. <br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><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
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
