English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
bootstrap의 학습은 매우 간단하며, 제공하는 스타일은 매우 아름다워. 조금만 간단하게 배우면 예쁜 페이지를 만들 수 있습니다.
bootstrap 중국어 웹사이트: http://v3.bootcss.com/
bootstrap는 세 가지 유형의 다운로드를 제공합니다：
用于生产环境的 Bootstrap
编译并压缩后的 CSS、JavaScript 및字体文件。不包含文档和源码文件。
Bootstrap 소스 코드
Less, JavaScript 및 글꼴 파일의 소스 코드를 포함하고 있으며 문서도 포함되어 있습니다. Less 컴파일러와 일부 설정 작업이 필요합니다.
Sass
이는 Bootstrap가 Less에서 Sass로의 소스 코드 이전 프로젝트입니다. Rails, Compass 또는 Sass에만 대응하는 프로젝트에서 빠르게 소스 코드를 포함하기 위해 사용됩니다.
실제로 bootstrap를 다운로드하지 않아도 사용할 수 있습니다:
Bootstrap 중국어 웹사이트는 Bootstrap를 위해 자체적으로 무료 CDN 가속 서비스를 구축했습니다. 국내 클라우드 제공업체의 CDN 서비스를 기반으로, 접속 속도가 더 빠르고 가속 효과가 더 두드러우며, 속도와 밴드폭 제한이 없으며 영구 무료입니다.
base.html
<!DOCTYPE html> <html lang="zh-CN">-CN"> <head> <meta charset="utf-8">-8"> <meta http-equiv="X-UA-최적화 가능" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 위의3meta 태그가 있습니다*필수*처음에 두어야 하며, 다른 어떤 내용도*필수*그 뒤를 따릅니다! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h1>안녕하세요, bootstrap!<>/h1> <!-- jQuery (Bootstrap의 자바스크립트 플러그인에 필요합니다) --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- 모든 컴파일된 플러그인(아래에 나열된 것)을 포함하거나 필요에 따라 개별 파일을 포함합니다 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js></script> </body> </html>
base.html에 bootstrap를 포함하여 저장하면, bootstrap가 제공하는 스타일을 사용할 수 있습니다.
폰트 아이콘
bootstrap는 기본적으로 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> <span class="glyphicon glyphicon-trash"></span> <span class="glyphicon glyphicon-play-circle"></span> <span class="glyphicon glyphicon-headphones"></span>
버튼
<button></button> 태그는 버튼을 생성하는 데 사용되며, bootstrap는 다양한 버튼 스타일을 제공합니다. <h3>버튼</h3> <button type="button" class="btn btn-default">버튼</버튼> <button type="button" class="btn btn-primary">primary</버튼> <button type="button" class="btn btn-success">success</버튼> <button type="button" class="btn btn-info">info</버튼> <button type="button" class="btn btn-warning">warning</버튼> <button type="button" class="btn btn-danger">danger</버튼> <h3>버튼 크기</h3> <button type="button" class="btn btn-default">버튼</버튼> <button type="button" class="btn btn-primary btn-lg">primary</버튼> <button type="button" class="btn btn-success btn-sm">success</버튼> <button type="button" class="btn btn-info btn-xs">info</버튼> <h3>버튼 안에 아이콘을 표시하다</h3> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span> 버튼</버튼>
버튼은 기본적인 크기 외에도, bootstrap는 버튼 크기를 조정할 수 있는 세 가지 매개변수를 제공합니다. 그것은: btn-lg、btn-sm과btn-xs。
下拉菜单
下拉메뉴는 가장 일반적인 상호작용 중 하나로, bootstrap는 아름다운 스타일을 제공합니다.
<h3>下拉메뉴</h3>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
드롭다운
<span class="caret"></span>
</버튼>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">동작</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">다른 동작</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">여기에 무엇인가 다른 것</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">분리된 링크</a></li>
</ul>
</div>
입력 필드
通过<input></input> 태그를 사용하여 입력 필드를 생성합니다.
<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>
네비게이션 패널
네비게이션 패널은 전체 웹사이트의 가이드로 필수적입니다.
<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="#">홈</a></li>
<li><a href="#about">정보</a></li>
<li><a href="#contact">연락처</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">드롭다운 <span class="caret"></스�페인></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">동작</a></li>
<li><a href="#">다른 동작</a></li>
<li class="divider"></li>
<li class="dropdown-header">네비게이션 헤더</li>
<li><a href="#">분리된 링크</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
양식
사용자와 시스템 간 데이터 전송은 모두 양식을 통해 완료되어야 합니다. 예를 들어 등록/로그인 정보 제출, 검색 조건 제출 등. <form></양식> 태그로 양식을 생성합니다.
<h3>양식</h3>
<form>
<div class="form-group">
<span class="glyphicon glyphicon-user"></span>
<input type="email" id="exampleInputEmail1" placeholder="이메일 입력">
</div>
<div class="form-group">
<span class="glyphicon glyphicon-lock"></span>
<input type="password" id="exampleInputPassword1" placeholder="암호">
</div>
<div class="form-group">
<label for="exampleInputFile">파일 입력</label>
<input type="file" id="exampleInputFile">
<p class="help-block">예제 블록-level help text here.</p>
</div>
<div class="checkbox">
label>
<input type="checkbox"> 나를 확인하다
</label>
</div>
<button type="submit" class="btn btn-default">제출</버튼>
</form>
경고 상자
경고 상자는 시스템이 사용자에게 정보를 전달하고 가이드를 제공하는 중요한 수단입니다. 경고 상자에 대한 태그가 없으며, bootstrap가 제공하는 스타일을 통해 즉시 아름다운 경고 상자를 만들 수 있습니다.
<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">×</스�페인></버튼>
경고!/자신을 확인해야 합니다. 너무 좋지 않게 보입니다.
</div>
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">성공!</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">정보!</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">경고!</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">위험!</a>
</div>
진행 상황
시스템의 처리 과정은 대개 사용자가 기다릴 필요가 있으며, 진행 상황은 사용자가 시스템의 처리 과정을 인식할 수 있게 하여,容忍도를 증가시킵니다.
<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 학습 튜토리얼 Bootstrap 실전 튜토리얼
선언: 본문 내용은 인터넷에서 가져왔으며, 원저자에게 속하며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용으로, 이 사이트는 소유권을 가지지 않으며, 인공적으로 편집되지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 침해 내용을 발견하면 이메일을 notice#w로 발송하여 주십시오.3codebox.com에 (보내는 이메일에서 #을 @으로 변경하십시오.) 신고하여 관련 증거를 제공하시면, 해당 내용이 사실이 확인되면 즉시 해당 내용을 삭제하겠습니다.