typora-root-url : 이미지
typora-copy-images-to : 이미지
부트 스트랩
메인 콘텐츠
BootStrap 설치 및 사용
BootStrap 소개
공식 웹 사이트 : http://getbootstrap.com/
중국 웹 사이트 : http://www.bootcss.com/
Bootstrap은 기성품 CSS 스타일 모음입니다 (여전히 매우 친숙 함). 두 명의 트위터 직원이 수행했습니다.
Bootstrap은 반응 형 레이아웃, 모바일 장치 우선 웹 프로젝트 개발을위한 가장 인기있는 HTML, CSS 및 JS 프레임 워크입니다.
2011 년에는 내부 분석 및 관리 기능을 개선하기 위해 소수의 Twitter 엔지니어 그룹이 여가 시간을 사용하여 사용하기 쉽고 우아하고 유연하며 확장 가능한 제품 용 프런트 엔드 도구 인 BootStrap을 구축했습니다. Bootstrap은 MARK OTTO와 Jacob Thornton에 의해 설계 및 제작되었으며 github에서 오픈 소스로 공개 된 후 사이트에서 가장 많은 watch & fork 프로젝트가되었습니다. 많은 엔지니어가 프로젝트에 적극적으로 코드를 기여하고 커뮤니티가 놀랍도록 활동적이며 코드 버전이 매우 빠르게 발전하고 공식 문서의 품질이 매우 높으며 (우아하다고 할 수 있음) 부트 스트랩을 기반으로하는 많은 웹 사이트가 등장했습니다. 인터페이스가 신선하고 간결합니다. 풍부한.
Bootstrap은 웹 페이지를 빠르게 생성 할 수있는 디자이너가없는 팀 (또는 프런트 엔드가없는 팀)에 특히 적합합니다.
BootStrap 기능
- 간결하고 직관적이며 강력한 프런트 엔드 개발 프레임 워크, html, css, javascript 도구 세트는 웹 개발을 더 빠르고 간단하게 만듭니다.
- html5 및 css3 기반 부트 스트랩에는 친숙한 학습 곡선, 뛰어난 호환성, 반응 형 디자인, 12 열 격자, 스타일 가이드 문서 등 매력적인 기능이 많이 있습니다.
- 맞춤형 JQuery 플러그인, 완전한 클래스 라이브러리, Less 기반 bootstrap3, Sass CSS 전처리 기술 기반 bootstrap4
- 부트 스트랩 반응 형 레이아웃 디자인을 사용하면 웹 사이트가 다른 해상도의 장치와 호환 될 수 있습니다. 부트 스트랩 반응 형 레이아웃 디자인은 사용자에게 더 나은 시각적 경험을 제공합니다.
- 풍부한 구성 요소
다운로드 및 사용
-
다운로드가 완료된 후
dist / css의 bootstrap.min.css를 프로젝트 CSS로 복사합니다.
dist / js의 bootstrap.min.js를 프로젝트의 js에 복사하십시오.
-
jquery.js 다운로드
- html의 템플릿은 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
viewport表示用户是否可以缩放页面；
width指定视区的逻辑宽度；
device-width指示视区宽度应为设备的屏幕宽度；
initial-scale指令用于设置Web页面的初始缩放比例
initial-scale=1则将显示未经缩放的Web文档
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>
<!-- 载入Bootstrap 的css -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>참고 :
<font color = "red"> 현재 jquery를 사용하지 않는 플러그인은 js 파일을 가져올 필요가 없습니다. 이는 템플릿의 무결성을 보장하기위한 것입니다. </ font>
기술:
- viewport <meta> 태그는 사용자가 웹 페이지를 확대 / 축소 할 수 있는지 여부를 지정하는 데 사용됩니다.
- 너비 및 높이 명령어는 각각 뷰포트의 논리적 너비와 높이를 지정합니다. 그 값은 픽셀 단위의 숫자이거나 특수한 표시 기호입니다.
- 너비 명령어는 device-width 태그를 사용하여 뷰포트의 너비가 기기의 화면 너비 여야 함을 나타냅니다.
- 높이 명령어는 device-height 태그를 사용하여 뷰포트의 높이가 기기의 화면 높이임을 나타냅니다.
- initial-scale 명령은 웹 페이지의 초기 크기를 설정하는 데 사용됩니다. 기본 초기 확대 / 축소 값은 스마트 폰 브라우저에 따라 다릅니다. 정상적인 상황에서 장치는 브라우저에 전체 웹 페이지를 표시하고 1.0으로 설정하면 크기가 조정되지 않은 웹 문서가 표시됩니다.
-
참조 API
레이아웃 컨테이너 및 그리드 그리드 시스템
레이아웃 컨테이너
1. .container 클래스는 너비가 고정되고 반응 형 레이아웃을 지원하는 컨테이너에 사용됩니다.
```php + HTML
<div class = "container">
...
</ div>
2、.container-fluid类用于100% 宽度，占据全部视口（viewport）的容器。
```html
<div class="container-fluid">
...
</div>그리드 그리드 시스템
Bootstrap은 반응 형 모바일 기기 우선 스트리밍 그리드 시스템을 제공합니다. 화면 또는 뷰포트 크기가 증가하면 시스템이 자동으로 최대 12 개의 열로 분할됩니다. 그리드 시스템은 일련의 행 및 열 조합을 통해 페이지 레이아웃을 만드는 데 사용되며 콘텐츠를 이러한 생성 된 레이아웃에 배치 할 수 있습니다.
그리드 시스템의 구현 원리는 컨테이너의 크기를 정의하고 12 개 (24 개 또는 32 개도 있지만 12 개가 가장 일반적 임)로 나눈 다음 내부 및 외부 여백을 조정하고 마지막으로 미디어 쿼리를 결합하여 매우 간단합니다. 강력한 응답 그리드 시스템을 생성했습니다. Bootstrap 프레임 워크의 그리드 시스템은 컨테이너를 12 개의 동일한 부분으로 나눕니다.
참고 : 그리드 시스템은 CSS를 사용해야합니다.
Container, row, xs (초소형 휴대폰), sm (소형 태블릿), md (중형 데스크톱), lg (대형 데스크톱) 즉, 초소형 화면 (자동), 소형 화면 (750px), 중형 화면 (970px) 및 대형 화면 (1170px)
데이터 행 (.row)은 적절한 정렬과 패딩을 제공하기 위해 컨테이너 (.container)에 포함되어야합니다.
열 (.column)은 행 (.row)에 추가 할 수 있으며 열 (column) 만 행 컨테이너 (.row)의 직접 자식 요소로 사용할 수 있지만 열 수의 합계는 12와 같이 균등하게 나눈 총 열 수를 초과 할 수 없습니다. . 12보다 크면 자동으로 다음 줄로 전환됩니다.
특정 콘텐츠는 컬럼 컨테이너 (컬럼)에 배치해야합니다.
<div class="container">
<div class="row">
<div class="col-md-4">4列</div>
<div class="col-md-8">8列</div>
</div>
</div>
컬럼 조합
열 조합에 대한 간단한 이해는 열을 병합 할 수를 변경하는 것입니다 (원칙 : 총 열 수가 12 개를 초과 할 수없고 12 개를 초과하면 자동으로 다음 행으로 전환됩니다.), 테이블의 colspan 속성과 다소 유사합니다.
<div class="container">
<div class="row">
<div class="col-md-4">4列</div>
<div class="col-md-8">8列</div>
</div>
<div class="row">
<div class="col-md-2">2列</div>
<div class="col-md-10">10列</div>
</div>
</div>열 오프셋
두 개의 인접한 열이 서로 가깝지 않고 여백이나 기타 기술적 수단을 사용하고 싶지 않은 경우. 이때 열 오프셋 기능을 사용하여 달성 할 수 있습니다. 열 오프셋을 사용하는 것도 매우 간단합니다. 열 요소에 클래스 이름 "col-md-offset-*"(별표는 오프셋 할 열 조합 수를 나타냄) 만 추가하면이 클래스 이름이있는 열이 오른쪽 오프셋. 예를 들어 열 요소에 "col-md-offset-8"을 추가하면 열이 8 개 열 너비만큼 오른쪽으로 이동 함을 의미합니다 (열 및 오프셋 열의 총 수가 12 개를 초과하지 않는지 확인하십시오. 그렇지 않으면 열이 중단됩니다 | 디스플레이).
<div class="container">
<div class="row">
<div class="col-md-1">1列</div>
<div class="col-md-1">2列</div>
<div class="col-md-1 col-md-offset-8">11列</div>
<div class="col-md-1">12列</div>
</div>
</div>열 정렬
컬럼 정렬은 실제로 컬럼의 방향을 바꾸는 것, 즉 좌우 부동을 변경하고 부동 거리를 설정하는 것입니다. Bootstrap 프레임 워크의 그리드 시스템에서 클래스 이름 col-md-push- 및 col-md-pull-이 추가됩니다 (여기서 별표는 이동 된 열 조합 수를 나타냄). 앞으로 당기고 뒤로 미십시오.
<div class="container">
<div class="row">
<div class="col-md-1 col-md-push-10">1列</div>
<div class="col-md-1 col-md-pull-1">2列</div>
</div>
</div>열 중첩
Bootstrap 프레임 워크의 그리드 시스템은 열 중첩도 지원합니다. 열에 하나 이상의 행 컨테이너를 추가 한 다음이 행 컨테이너에 열을 삽입 할 수 있습니다.
<div class="container">
<div class="row">
<div class="col-md-2">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-9">9</div>
<div class="col-md-3">3</div>
</div>
</div>
<div class="col-md-10">我的里面嵌套了一个网格
<div class="row">
<div class="col-md-10">10</div>
<div class="col-md-2">2</div>
</div>
</div>
</div>
</div>일반적인 스타일
조판
표제
Bootstrap은 일반 HTML 페이지와 동일합니다. 제목의 정의는 <h1> ~ <h6> 태그를 사용하지만 Bootstrap은 기본 스타일을 다루며 모든 브라우저에서 동일한 효과를 표시하는 데 사용합니다. 제목이 아닌 요소와 제목이 동일한 스타일을 사용하도록하기 위해 .h1에서 .h6까지 6 개의 클래스 이름도 구체적으로 정의됩니다. 동시에 작은 자막 줄 <small> </ small>이 나오거나 .small을 사용할 수 있습니다.
<h1>h1. Bootstrap heading<small>副标题</small></h1>
<div class="h1">Bootstrap标题1<span class="small">副标题</span></div>절
단락은 조판에서 또 다른 중요한 요소입니다. .lead를 사용하여 콘텐츠를 강조합니다 (그 역할은 텍스트 크기를 늘리고 텍스트를 굵게 표시하고 그에 따라 줄 높이와 여백을 처리하는 것입니다. 다음 태그를 사용하여 텍스트를 눈에 띄게 만들 수 있습니다.
<small> : 작은 글꼴
<b> <strong> : 굵게
<i> <em> : 斜体
<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>강조하다
여기서 강조된 클래스 이름이라고하는 클래스 이름 집합을 정의합니다. 이러한 강조된 클래스는 색상으로 강조됩니다. 지침은 다음과 같습니다.
.text-muted : 힌트, 밝은 회색 사용 (# 999)
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>정렬 효과
CSS에서 텍스트 정렬은 종종 텍스트의 정렬 스타일을 설정하는 데 사용됩니다.
크게 네 가지 스타일이 있습니다.
왼쪽 정렬, 값은 왼쪽입니다.
가운데 정렬, 값은 가운데입니다.
오른쪽 정렬, 값이 오른쪽입니다.
양쪽 끝을 정당화하면 값이 정당화됩니다.
작동을 단순화하고 사용을 용이하게하기 위해 Bootstrap은 4 개의 클래스 이름을 정의하여 텍스트의 정렬 스타일을 제어합니다 : .text-left : left alignment. text-center : center alignment. text-right : right alignment. text-justify : both ends 정렬.
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份</p>명부
HTML 문서에는 세 가지 주요 목록 구조가 있습니다.
정렬되지 않은 목록 (<ul> <li>… </ li> </ ul>)
정렬 된 목록 (<ol> <li>… </ li> </ ol>)
定义 列表 (<dl> <dt>… </ dt> <dd>… </ dd> </ dl>)
포인트 목록으로 이동
class = "list-unstyled"
<ul class="list-unstyled">
<li>无序项目列表一</li>
<li>无序项目列表二</li>
</ul>인라인 목록
class = "list-inline", 세로 목록을 가로 목록으로 바꾸고 글 머리 기호 (숫자)를 제거하여 가로 표시를 유지합니다. 인라인 목록은 수평 탐색을 위해 탄생했다고 말할 수도 있습니다.
<ul class="list-inline">
<li>首页</li>
<li>java学院</li>
<li>在线课堂</li>
</ul>정의 목록
원본 파운데이션에 스타일을 추가하고 class = "dl-horizontal"스타일을 사용하여 가로 정의 목록을 만듭니다. 제목 너비가 160px를 초과하면 세 개의 줄임표가 표시됩니다.
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表是一种样式表语言</dd>
</dl>
<dl class="dl-horizontal">
<dt>HTML 超文本标记语言</dt>
<dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>
<dt>测试标题不能超过160px的宽度,否则2个点</dt>
<dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd>
</dl>암호
일반적으로 개인 블로그에서 코드 스타일을 표시하기 위해 더 자주 사용됩니다. Bootstrap에는 주로 세 가지 코딩 스타일이 있습니다.
(1) <code> </ code>를 사용하여 한 줄의 인라인 코드를 표시합니다.
(2) <pre> </ pre>를 사용하여 여러 줄의 코드를 표시합니다.
스타일 : 사전 스크롤 가능 (높이, 최대 높이 높이 고정, 340px, 스크롤 막대보다 더 많음)
(3) <kbd> </ kbd>를 사용하여 단축키와 같은 사용자 입력 코드를 표시합니다.
한 줄 인라인 코드
<code>this is a simple code</code>단축키
<p>使用<kbd>ctrl+s</kbd>保存</p>여러 줄 블록 코드
<!-- 代码会保留原本的格式，包括空格和换行 -->
<pre>
public class HelloWorld {
public static void main(String[] args){
System.out.println("helloworld...");
}
}
</pre>
<!--
显示html标签的代码需要适应字符实体
小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代
-->
<pre>
<ul>
<li>测试实体符</li>
</ul>
</pre>
<!-- 当高度超过，会存在滚动条 -->
<pre class="pre-scrollable">
<ol>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
</ol>
</pre>형태
테이블 스타일
Bootstrap은 테이블에 대해 1 개의 기본 스타일과 4 개의 추가 스타일을 제공하며 응답 성을 지원하는 테이블을 제공합니다. Bootstrap 테이블을 사용하는 과정에서 다른 테이블 스타일을 얻으려면 해당 클래스 이름 만 추가하면됩니다.
기본 스타일
1) .table : 기본 테이블
스타일 첨부
1) .table-striped : 얼룩말 횡단 테이블
2) .table-border : 테두리가있는 테이블
3) .table-hover : 강조 표시된 표 위로 이동
4). 테이블 압축 : 콤팩트 테이블, 셀에 내부 여백이 없거나 내부 여백이 다른 테이블보다 작음
tr, th, td 스타일
다섯 가지 클래스 이름을 제공하며 각 클래스 이름은 행의 서로 다른 배경색을 제어합니다.
| 수업 | 기술 | 예 |
|---|---|---|
| .유효한 | 마우스 오버 색상을 행 또는 셀에 적용 | <font color = "# f5f5f5"> # f5f5f5 </ font> |
| .성공 | 성공적인 작업을 나타냅니다. | <font color = "# dff0d8"> # dff0d8 </ font> |
| .info | 정보 변경을 나타내는 작업 | <font color = "# d9edf7"> # d9edf7 </ font> |
| .경고 | 경고 조치를 나타냅니다. | <font color = "# fcf8e3"> # fcf8e3 </ font> |
| .위험 | 위험한 작업을 나타냅니다. | <font color = "# f2dede"> # f2dede </ font> |
<table class="table table-bordered table-hover">
<tr class="active">
<th>JavaSE</th>
<th>数据库</th>
<th>JavaScript</th>
</tr>
<tr class="danger">
<td>面向对象</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr class="success">
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
</table>형태
양식의 주요 기능은 사용자와 통신하는 데 사용되는 웹 컨트롤입니다. 좋은 양식 디자인을 사용하면 웹 페이지가 사용자와 더 잘 통신 할 수 있습니다. 양식의 공통 요소는 주로 텍스트 입력 상자, 드롭 다운 선택 상자, 라디오 버튼, 체크 버튼, 텍스트 필드 및 버튼 등입니다.
양식 제어
.form-control .input-lg (크게) .input-sm (작게)
입력 상자 텍스트
.form-control
<div class="col-sm-3">
<input type="text" name="" id="" class="form-control" />
<input type="text" name="" id="" class="form-control input-lg" />
<input type="text" name="" id="" class="form-control input-sm" />
</div>드롭 다운 선택 상자 선택
여러 줄 선택 설정 : multiple = "multiple"
<div class="col-sm-3">
<select class="form-control">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<select class="form-control" multiple="multiple">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
</div>텍스트 영역
<div class="col-sm-3">
<textarea class="form-control" rows="3"></textarea>
</div>체크 박스
수직 디스플레이 : .checkbox
수평 디스플레이 : .checkbox-inline
<!-- 垂直显示 -->
<div>
<div class="checkbox">
<label><input type="checkbox" >游戏</label>
</div>
<div class="checkbox">
<label><input type="checkbox" >学习</label>
</div>
</div>
<!-- 水平显示 -->
<div>
<label class="checkbox-inline">
<input type="checkbox" >游戏
</label>
<label class="checkbox-inline">
<input type="checkbox" >学习
</label>
</div>라디오
수직 디스플레이 : .radio
수평 디스플레이 : .radio-inline
<!-- 垂直显示 -->
<div>
<div class="radio">
<label><input type="radio" >男</label>
</div>
<div class="radio">
<label><input type="radio" >女</label>
</div>
</div>
<!-- 水平显示 -->
<div>
<label class="radio-inline">
<input type="radio" >男
</label>
<label class="radio-inline">
<input type="radio" >女
</label>
</div>단추
1) 버튼을 사용하여
기본 스타일 : btn
<button class="btn">按钮</button>： 样式 ： btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default
<button class="btn btn-danger">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-link">按钮</button>2) 다중 라벨 지원 : div를 사용하여 버튼 만들기
<a href="##" class="btn btn-info">a标签按钮</a>
<span class="btn btn-success">span标签按钮</span>
<div class="btn btn-warning">div标签按钮</div>3) 버튼 크기
.btn-lg, .btn-sm 또는 .btn-xs를 사용하여 다양한 크기의 버튼을 가져옵니다.
<button class="btn btn-primary btn-xs">超小按钮.btn-xs</button>
<button class="btn btn-primary btn-sm">小型按钮.btn-sm</button>
<button class="btn btn-primary">正常按钮</button>
<button class="btn btn-primary btn-lg">大型按钮.btn-lg</button> 4) 버튼 비활성화
방법 1 : 비활성화 된 속성을 레이블에 추가
<button class="btn btn-danger" disabled="disabled">禁用按钮</button>방법 2 : 요소 태그에 클래스 이름 "disabled"추가
<button class="btn btn-danger disabled">禁用按钮</button>클래스 속성에 비활성화 된 항목을 추가하는 것은 스타일에서만 비활성화되며이 버튼은 실제로 비활성화되지 않습니다!
양식 레이아웃
기본 양식 구조는 Bootstrap과 함께 제공되며 개별 양식 컨트롤은 일부 전역 스타일을 자동으로받습니다. 기본 양식을 만드는 단계는 다음과 같습니다.
- 부모 <form> 요소에 role = "form" 을 추가 합니다.
- .form-group 클래스를 사용하여 <div> 에 태그와 컨트롤을 넣습니다 . 이것은 최적의 간격을 얻기 위해 필요합니다.
- 모든 텍스트 요소 <input>, <textarea> 및 <select>에 class = " form-control " 을 추가합니다 .
수평 형태
같은 줄에 가로 형식 표시
Bootstrap 프레임 워크가있는 그리드 시스템
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="control-label col-sm-2">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输入邮箱"/>
</div>
</div>
<div class="form-group">
<label for="pwd" class="control-label col-sm-2">密码</label>
<div class="col-sm-10">
<input type="pwd" class="form-control" placeholder="请输入密码" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2">
<div class=" checkbox">
<label>
<input type="checkbox" />记住密码
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default">提交</button>
</div>
</div>
</form>인라인 양식
양식의 컨트롤을 한 줄 양식 인라인으로 표시
레이블이 표시되지 않습니다. 존재의 의미 : 입력 제어에 대한 레이블이 설정되어 있지 않으면 스크린 리더가 올바르게 인식 할 수 없습니다.
<form class="form-inline">
<div class="form-group">
<label for="email" >邮箱</label>
<input type="email" class="form-control" placeholder="请输入邮箱"/>
</div>
<div class="form-group">
<label for="pwd" >密码</label>
<input type="pwd" class="form-control" placeholder="请输入密码" />
</div>
<div class="form-group checkbox">
<label><input type="checkbox" />记住密码</label>
</div>
<div class="form-group">
<button class="btn btn-default">提交</button>
</div>
</form>썸네일
썸네일은 전자 상거래 웹 사이트에서 매우 일반적이며 가장 일반적인 위치는 제품 목록 페이지입니다. 썸네일 구현은 그리드 시스템과 함께 사용됩니다. 동시에 썸네일은 제목, 설명, 버튼 등과 일치시킬 수 있습니다.
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/IMG_0131.JPG" alt="...">
<h3>高圆圆</h3>
<p>出生于北京市，中国内地影视女演员、模特。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
</div>
</div>패널
기본 .panel 구성 요소는 콘텐츠를 포함하도록 기본 테두리와 패딩을 설정하는 것입니다.
.panel-default : 기본 스타일
.panel-heading : 패널 제목
.panel-body : 패널 본문 콘텐츠
<div class="panel panel-success">
<div class="panel-heading">
......
</div>
<div class="panel-body">
......
</div>
</div>BootStrap 플러그인
항해
드롭 다운 및 버튼 조합을 사용하여 탐색
요점 :
1、基本样式: .nav 与 “nav-tabs”、“nav-pills”组合制作导航
2、分类:
1)、标签型 (nav-tabs)导航
2)、胶囊形(nav-pills)导航
3)、堆栈(nav-stacked)导航
4)、自适应(nav-justified)导航
5)、面包屑式(breadcrumb)导航 ，单独使用样式，不与nav一起使用,直接加入到ol、ul中即可，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）
3、状态:
1)、选中状态 active 样式
2)、禁用状态: disable
4、二级菜单탭 탐색
<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>캡슐 내비게이션
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>페이지 탐색
페이징은 모든 곳에서 볼 수 있으며 페이지 탐색과 페이지 탐색으로 구분됩니다.
페이지 탐색 : ul 태그에 페이지 매김 [pagination-lg | pagination-sm] 추가
페이지 탐색 : ul 태그에 호출기 추가
쪽수 매기기
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>페이지 넘기기
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>드롭 다운 메뉴
Bootstrap 프레임 워크의 드롭 다운 메뉴를 사용할 때 두 개의 js를 사용해야합니다.
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="js/bootstrap.min.js"></script>요점 :
1、使用一个类名为dropdown 或btn-group的div 包裹整个下拉框:
<div class="dropdown"></div>
2、默认向下dropdown，向上弹起加入 . dropup 即可
3、使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
4、在button中 使用font 制作下拉箭头
<span class="caret"></span>
5、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu
6、分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能
7、分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
8、对齐方式:
1)、dropdown-menu-left 左对齐 默认样式
2)、dropdown-menu-right 右对齐
9、激活状态（.active）和禁用状态（.disabled）<!--使用一个类名为dropdown,默认向下dropdown，向上弹起加入 . dropup 即可-->
<div class="dropdown ">
<!--使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性-->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
喜欢频道 <span class="caret"></span><!--下拉箭头-->
</button>
<!--下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu-->
<ul class="dropdown-menu"> <!--dropdown-menu-right右对齐-->
<!--分组标题: li 添加类名 “dropdown-header” 来实现分组的功能-->
<li class="dropdown-header">----科普----</li>
<li>
<a href="#">人与自然</a>
</li>
<!--分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能-->
<li class="divider"></li>
<li class="dropdown-header">----搞笑----</li>
<li>
<a href="#">欢乐喜剧人</a>
</li>
<li>
<a href="#">快乐大本营</a>
</li>
<li class="divider"></li>
<li class="disabled"> <!--禁用状态-->
<a href="#">生活大爆炸</a>
</li>
</ul>
</div>모달 상자
모달 상자 (Modal)는 부모 양식을 덮는 자식 양식입니다. 일반적으로 목적은 단일 소스의 콘텐츠를 표시하여 상위 양식을 벗어나지 않고 일부 상호 작용을 허용하는 것입니다. 하위 양식은 정보, 상호 작용 등을 제공 할 수 있습니다.
용법
- 데이터 속성을 통해 : 컨트롤러 요소 (예 : 버튼 또는 링크)에 data-toggle = "modal" 속성을 설정하고 data-target = "# identifier" 또는 href = "# identifier" 를 설정하여 전환 할 특정 모드를 지정합니다. 상태 상자 (id = "identifier"포함).
- JavaScript를 통해 :이 기술을 사용하면 JavaScript를 통해 id = "identifier"인 모달 상자를 호출 할 수 있습니다.
$('#identifier').modal(options);예
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>방법
| 방법 | 기술 | 예 |
|---|---|---|
| 토글 : .modal ( 'toggle') | 모달 상자를 수동으로 전환하십시오. | $('#identifier').modal('toggle'); |
| 표시 : .modal ( 'show') | 모달 상자를 수동으로 엽니 다. | $('#identifier').modal('show'); |
| 숨기기 : .modal ( 'hide') | 모달 상자를 수동으로 숨 깁니다. | $('#identifier').modal('hide'); |