Bootstrap 은 사용 하기 좋 은 전단 프레임 입 니 다.
부 트 스 트랩 은 HTML,CSS,JAVASCRIPT 를 기반 으로 응답 식 레이아웃,모 바 일 기기 우선 WEB 프로젝트 를 개발 하 는 데 사용 된다.Bootstrap 은 JQuery 를 바탕 으로 더욱 개성 화 된 보완 을 하여 자신 만 의 사이트 스타일 을 형성 하고 대부분의 jQuery 플러그 인 을 호 환 합 니 다.전단 개발 을 더욱 빠 르 고 간단하게 하 다.
기본 구조:Bootstrap 은 격자 시스템,링크 스타일,배경 을 가 진 기본 구 조 를 제공 합 니 다.
CSS:Bootstrap 은 다음 과 같은 기능 을 가지 고 있 습 니 다.전역 적 인 CSS 설정,기본 적 인 HTML 요소 스타일,확장 가능 한 class,그리고 선진 적 인 격자 시스템 을 정의 합 니 다.
구성 요소:Bootstrap 은 그림 만 들 기,드 롭 다운 메뉴,네 비게 이 션,경고 상자,팝 업 상자 등 10 여 개의 재 활용 가능 한 구성 요 소 를 포함 하고 있 습 니 다.
JavaScript 플러그 인:Bootstrap 에는 10 여 개의 사용자 정의 jQuery 플러그 인 이 포함 되 어 있 습 니 다.모든 플러그 인 을 직접 포함 할 수도 있 고 하나씩 포함 할 수도 있 습 니 다.
맞 춤 형:Bootstrap 의 구성 요소,LESS 변수,jQuery 플러그 인 을 맞 춤 형 으로 만 들 수 있 습 니 다.
1.Bootstrap 기본 템 플 릿
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- ， 1-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 3 meta * * ， * * ！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.css" rel="external nofollow" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--
①<!--[if lt IE 9]>…… <![endif]- -> ，lt ，gt 。 ， IE9 。
②html5shiv： ie9 html5 ， CSS 。
③respond.min: css3 Media Query IE6-IE8 。
-->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1> ！</h1>
<script src="js/jquery-3.1.1.js"></script>
<!-- BootStrap JS
① BootStrap JS ， JS ；
②BootStrap JS JQuery， JS JQuery ；
-->
<script src="js/bootstrap.min.js"></script>
</body>
</html>2.구성 요소
Bootstrap 에는 풍부 한 웹 구성 요소 가 포함 되 어 있 으 며,이러한 구성 요소 에 따라 아름 답 고 기능 이 완 비 된 사 이 트 를 신속하게 구축 할 수 있 습 니 다.다음 구성 요 소 를 포함 합 니 다:
드 롭 다운 메뉴,버튼 그룹,버튼 드 롭 다운 메뉴,네 비게 이 션,네 비게 이 션 바,경로 내 비게 이 션,페이지 나 누 기,레이아웃,미리 보기 그림,경고 대화 상자,진도 바,미디어 대상 등.
2.1 글꼴 아이콘
boottstrap 은 기본적으로 200 여 개의 아이콘 을 제공 합 니 다.이 아이콘 들 은 span 탭 을 통 해 사용 할 수 있 습 니 다.
<h3> </h3>
<span class="glyphicon glyphicon-home"></span>
<span class="glyphicon glyphicon-signal"></span>
<span class="glyphicon glyphicon-cog"></span>
<span class="glyphicon glyphicon-apple"></span>
2.2 버튼
탭 은 단 추 를 만 드 는 데 사 용 됩 니 다.boottstrap 은 다양한 단추 스타일 을 제공 합 니 다.단 추 는 기본 크기 를 제외 하고 boottstrap 은 단추 의 크기 를 조정 하 는 세 가지 인 자 를 제공 합 니 다.각각 btn-lg,btn-sm 과 btn-xs 입 니 다.
<h3> </h3>
<button type="button" class="btn btn-default"> </button>
<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-success">success</button>
<button type="button" class="btn btn-info">info</button>
<button type="button" class="btn btn-warning">warning</button>
<button type="button" class="btn btn-danger">danger</button>
<h3> </h3>
<button type="button" class="btn btn-default"> </button>
<button type="button" class="btn btn-primary btn-lg">primary</button>
<button type="button" class="btn btn-success btn-sm">success</button>
<button type="button" class="btn btn-info btn-xs">info</button>
<h3> </h3>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span> </button>
2,3 드 롭 다운 메뉴
드 롭 다운 메뉴 는 가장 흔히 볼 수 있 는 대화 중 하나 로 boottstrap 은 우리 에 게 예 쁜 스타일 을 제공 합 니 다.
<h3> </h3>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
</ul>
</div>
2.4 입력 상자
탭 을 통 해 입력 상 자 를 만 듭 니 다.
<h3> </h3>
<div class="input-group">
<span class="glyphicon glyphicon-user"></span>
<input type="text" placeholder="username">
</div>
<div class="input-group">
<span class="glyphicon glyphicon-lock"></span>
<input type="password" placeholder="password">
</div>
2.5 항 법 표시 줄
네 비게 이 션 바 는 전체 사이트 의 안내 로 서 없어 서 는 안 된다.
<h3> </h3>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
<li><a href="#about" rel="external nofollow" >About</a></li>
<li><a href="#contact" rel="external nofollow" >Contact</a></li>
<li class="dropdown">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
2.6 폼
사람과 시스템 간 의 데이터 전달 은 모두 양식 에 의 해 이 루어 져 야 한다.예 를 들 어 등록/로그 인 정보의 제출,조회 조건 의 제출 등 이다.탭 으로 폼 을 만 듭 니 다.
<h3> </h3>
<form>
<div class="form-group">
<span class="glyphicon glyphicon-user"></span>
<input type="email" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<span class="glyphicon glyphicon-lock"></span>
<input type="password" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
2.7 경고 상자
경고 상 자 는 시스템 이 사용자 에 게 정 보 를 전달 하고 안 내 를 제공 하 는 중요 한 수단 이다.경고 상자 에 대한 태그 가 없습니다.boottstrap 에서 제공 하 는 스타일 을 통 해 예 쁜 경고 상 자 를 순식간에 만 들 수 있 습 니 다.
<h3> </h3>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-success" role="alert">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">success!</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">info!</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">warning!</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">danger!</a>
</div>
2.8 진도 게이지
시스템 의 처리 과정 은 사용자 가 기 다 려 야 하고 진도 조 는 사용자 로 하여 금 시스템 의 처리 과정 을 감지 하 게 하여 용인 도 를 높 일 수 있다.
<h3> </h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
70%
</div>
</div>우선,우 리 는 먼저 격자 시스템 이 무엇 인지 알 아야 한다!내 려 다 보기↓
Bootstrap 은 응답 식,모 바 일 장치 우선 스 트림 격자 시스템 을 제공 합 니 다.화면 이나 뷰 포트(viewport)크기 가 증가 함 에 따라 시스템 은 자동 으로 최대 12 열 로 나 눌 수 있 습 니 다.이것 은 사용 하기 쉬 운 미리 정 의 된 클래스 와 강력 한 mixin 을 포함 하여 더욱 의미 있 는 레이아웃 을 만 드 는 데 사용 된다.
격자 시스템 은 일련의 줄(row)과 열(column)의 조합 을 통 해 페이지 레이아웃 을 만 드 는 데 사 용 됩 니 다.우리 의 내용 은 이 만 든 레이아웃 에 넣 을 수 있 습 니 다.다음은 Bootstrap 격자 시스템 의 작업 원 리 를 소개 합 니 다.
'행(row)'은.container(고정 너비)나.container-fluid(100%너비)에 포함 되 어야 합 니 다.적당 한 배열(aligment)과 내 보(padding)를 부여 할 수 있 습 니 다.
'행(row)'을 통 해 수평 방향 으로'열(column)'그룹 을 만 듭 니 다.
당신 의 내용 은'열(column)'에 놓 아야 하 며,'열(column)'만 줄(row)의 직접 하위 요소 로 사용 할 수 있 습 니 다.
.row 와.col-xs-4 와 같은 미리 정 의 된 클래스 는 격자 레이아웃 을 빠르게 만 들 수 있 습 니 다.Bootstrap 소스 코드 에서 정 의 된 mixin 도 의미 화 된 레이아웃 을 만 드 는 데 사용 할 수 있 습 니 다.
'열(column)'에 padding 속성 을 설정 하여 열 과 열 사이 의 간격(gutter)을 만 듭 니 다.'row 요소 에 마이너스 margin 을 설정 함으로써'container 요소 로 설 정 된 padding'을 상쇄 하고'행(row)'에 포 함 된'열(column)'을 간접 적 으로 상쇄 합 니 다.
격자 시스템 의 열 은 1 에서 12 의 값 을 지정 하여 뛰 어 넘 는 범 위 를 나타 낸다.예 를 들 어 세 개의 등 폭 열 은 세 개의.col-xs-4 를 사용 하여 만 들 수 있다.
'행(row)'에 포 함 된'열(column)'이 12 보다 크 면 나머지'열(column)'이 있 는 요 소 는 전체 다른 줄 로 배 열 됩 니 다.
격자 류 는 화면 너비 가 크 거나 경계 점 크기 와 같은 장치 에 적합 하 며 작은 화면 장치 에 격자 류 를 덮어 씁 니 다.따라서 요소 에 있어 서 모든.col-md-*격자 류 는 화면 너비 가 크 거나 분계 점 크기 와 같은 장치 에 적용 되 고 작은 화면 장치 에 격자 류 를 덮어 씁 니 다.따라서 요소 에 어떠한.col-lg-*도 존재 하지 않 고 스크린 장치 에 도 영향 을 줍 니 다.
3.1 미디어 조회
격자 시스템 에서,우 리 는 Less 파일 에서 다음 미디어 조회(media query)를 사용 하여 관건 적 인 경계 점 한도 값 을 만 듭 니 다.
/* （ ， 768px） */
/* ， Bootstrap （ Bootstrap ） */
/* （ ， 768px） */
@media (min-width: @screen-sm-min) { ... }
/* （ ， 992px） */
@media (min-width: @screen-md-min) { ... }
/* （ ， 1200px） */
@media (min-width: @screen-lg-min) { ... }
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
위의 코드 를 입력 하면 위의 그림 의 스타일 을 실현 할 수 있 습 니 다.격자 시스템 에 대해 이미 알 고 있 는 것 이 아 닙 니까?우 리 는 계속 아래 를 보 겠 습 니 다↓
3.3 응답 열 초기 화
제 시 된 격자 class 가 있 더 라 도 일부 문제 에 부 딪 힐 수 있 습 니 다.예 를 들 어 특정한 한도 값 이 있 을 때 어떤 열 은 다른 열 보다 높 은 상황 이 발생 할 수 있 습 니 다.이 문 제 를 극복 하기 위해 서 는.clearfix 와 응답 식 도구 류 를 공동으로 사용 하 는 것 을 권장 합 니 다.
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
<h2 style="margin: 8px 0px 0px; padding: 0px; font-weight: bold; font-size: 16px; line-height: 28px; max-width: 100%; color: #59c3f9; min-height: 32px; border-bottom-width: 1.5px; border-bottom-style: solid; border-color: #59c3f9; text-align: justify;"><span style="font-family: 'Microsoft YaHei'; font-size: 14px;"><span class="autonum" style="background-color: #59c3f9; color: #ffffff; display: block; float: left; line-height: 20px; margin: 0px 8px 0px 0px; max-width: 100%; padding: 4px 10px; word-wrap: break-word !important;" title="" data-original-title="">3.2.1</span><span style="font-size: 16px;"><strong class="135brush" style="border-color: #59c3f9; color: inherit;" data-brushtype="text"> </strong></span></span></h2>
3.4 열 오프셋
.col-md-offset-*클래스 를 사용 하면 열 을 오른쪽으로 이동 할 수 있 습 니 다.이러한 종 류 는 실제 적 으로*선택 기 를 사용 하여 현재 요소 에 왼쪽 여백(margin)을 추가 합 니 다.예 를 들 어,.col-md-offset-4 류 는.col-md-4 요 소 를 오른쪽으로 4 개의 열(column)의 폭 을 옮 겼 다.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
3.5 내장 열
내 장 된 격자 시스템 을 사용 하여 내용 을 다시 끼 워 넣 기 위해 서 는 새로운.row 요소 와 일련의.col-sm-*요 소 를 이미 존재 하 는.col-sm-*요소 에 추가 할 수 있 습 니 다.포 함 된 줄(row)에 포 함 된 열(column)의 개 수 는 12 열 을 초과 할 수 없습니다.
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
3.6 열 정렬
.col-md-push-*와.col-md-pull-*류 를 사용 하면 열(column)의 순 서 를 쉽게 바 꿀 수 있 습 니 다.
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
총결산
위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 Bootstrap 의 아주 좋 은 전단 프레임 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
부트스트랩 5 스티커Sticky는 페이지의 특정 영역에서 요소를 잠글 수 있도록 하는 구성 요소입니다. 수동 설치(zip 패키지) 부트스트랩 이미지 구성 요소를 활용하고 프로젝트에서 사용하려면 먼저 을 설치해야 합니다. MDB CLI ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
