English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 위치
  2. 홈페이지
  3. 경험 노트
  4. 본문

BootStrap 입문 튜토리얼(1) - 시각적 레이아웃

다운로드 주소:http://v3.bootcss.com/getting-started/#download

HTML 템플릿：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 템플릿</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap를 포함하려면 다음과 같은 코드를 포함합니다： -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim과 Respond.js는 IE를8 HTML을 지원5요소와 미디어 쿼리 -->
<!-- 주의: file:// Respond.js 파일을 포함하면 이 파일의 효과가 발생하지 않습니다 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap의 JavaScript 플러그인은 jQuery를 포함해야 합니다) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 모든 컴파일된 플러그인을 포함 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

　　여기서, jquery.js, bootstrap.min.js, bootstrap.min.css 파일이 포함되어 있어 일반 HTML 파일을 Bootstrap를 사용하는 템플릿으로 만들 수 있습니다.

Bootstrap CDN 추천

　　Baidu의 정적 자원 라이브러리 CDN 서비스를 사용하여 다음과 같은 코드를 포함합니다：

<!-- 새 Bootstrap 핵심 CSS 파일 --<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 선택적인 Bootstrap 테마 파일(보통 사용하지 않음) --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
<!-- jQuery 파일. 반드시 bootstrap.min.js 이전에 포함해야 합니다 --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 가장 최신의 Bootstrap 핵심 JavaScript 파일 --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

비주얼 레이아웃：

코드는 다음과 같습니다：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstraptest</title>
<!-- 새 Bootstrap 핵심 CSS 파일 --<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 선택적인 Bootstrap 테마 파일(보통 사용하지 않음) --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
<!-- jQuery 파일. 반드시 bootstrap.min.js 이전에 포함해야 합니다 --><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 가장 최신의 Bootstrap 핵심 JavaScript 파일 --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img alt="[#0#]" src="img/ad.jpg" class="img-반응형" />
<div class="caption">
<h3>
썸네일 레이블
</h3>
<p>
크라스 정교, 다피부스 액시리스 인, 이게스타스 게트 퀼람. دون체 이 엘리트 노 미 포르타 그라비다 아트 eget 메트우스. 누람 이 돌러 이 니브 후트리 셰 힐라 유 이 엘리트.
</p>
<p>
<a class="btn btn-primary" href="#">작업</a> <a class="btn" href="#">작업</a>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img alt="[#0#]" src="v3/default5.jpg" />
<div class="caption">
<h3>
썸네일 레이블
</h3>
<p>
크라스 정교, 다피부스 액시리스 인, 이게스타스 게트 퀼람. دون체 이 엘리트 노 미 포르타 그라비다 아트 eget 메트우스. 누람 이 돌러 이 니브 후트리 셰 힐라 유 이 엘리트.
</p>
<p>
<a class="btn btn-primary" href="#">작업</a> <a class="btn" href="#">작업</a>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img alt="[#0#]" src="v3/default6.jpg" />
<div class="caption">
<h3>
썸네일 레이블
</h3>
<p>
크라스 정교, 다피부스 액시리스 인, 이게스타스 게트 퀼람. دون체 이 엘리트 노 미 포르타 그라비다 아트 eget 메트우스. 누람 이 돌러 이 니브 후트리 셰 힐라 유 이 엘리트.
</p>
<p>
<a class="btn btn-primary" href="#">작업</a> <a class="btn" href="#">작업</a>
</p>
</div>
</div>
</div>
</div> <a id="modal-989545" href="#modal-container-989545" role="button" class="btn" data-toggle="modal">罩罩 창을 유발</a>
<div class="modal fade" id="modal-container-989545" 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">
제목
</h4>
</div>
<div class="modal-body">
내용...asdfasdf
</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>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">
Panel footer
</div>
</div>
<div class="page-header">
<h1>
예제 페이지 헤더 <small>헤더의 서브 텍스트</small>
</h1>
</div>
<div class="btn-group">
<button class="btn btn-<button type="button"><em class="glyphicon glyphicon-align-left"></em> 좌</button> <button class="btn btn-<button type="button"><em class="glyphicon glyphicon-align-center"></em> 중</button> <button class="btn btn-<button type="button"><em class="glyphicon glyphicon-align-right"></em> 우</button> <button class="btn btn-<button type="button"><em class="glyphicon glyphicon-align-justify"></em> 전</button>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="jumbotron">
<h1>
안녕하세요, 세상!
</h1>
<p>
이 템플릿은 간단한 마케팅이나 정보 웹사이트를 만드는 데 사용됩니다. 히로 유닛이라고 불리는 큰 콜아웃과 세 개의 지원 내용이 포함되어 있습니다. 독특한 것을 만들기 시작하는 데 사용하세요.
</p>
<p>
<a class="btn btn-primary btn-large" href="#"> 더 알아보기</a>
</p>
</div>
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">导航 전환</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">브랜드</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">링크</a>
</li>
<li>
<a href="#">링크</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">드롭다운<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">동작</a>
</li>
<li>
<a href="#">다른 동작</a>
</li>
<li>
<a href="#">여기에 무엇인가</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">분리된 링크</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">추가 분리된 링크</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" type="text" />
</div> <button type="submit" class="btn btn-default">제출</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">링크</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">드롭다운<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">동작</a>
</li>
<li>
<a href="#">다른 동작</a>
</li>
<li>
<a href="#">여기에 무엇인가</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">분리된 링크</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
<div class="jumbotron">
<h1>
안녕하세요, 세상!
</h1>
<p>
이 템플릿은 간단한 마케팅이나 정보 웹사이트를 만드는 데 사용됩니다. 히로 유닛이라고 불리는 큰 콜아웃과 세 개의 지원 내용이 포함되어 있습니다. 독특한 것을 만들기 시작하는 데 사용하세요.
</p>
<p>
<a class="btn btn-primary btn-large" href="#"> 더 알아보기</a>
</p>
</div> <address> <strong>Twitter, Inc.</strong><br /> 795 Folsom Ave, Suite 600<br /> 샌프란시스코, 캘리포니아 94107<br /> <abbr title="[#2#]">P:</abbr> (123) 456-7890</address>
<div class="btn-group">
<button class="btn btn-<button type="button"><em class="glyphicon glyphicon-align-left"></em> 좌</button> <button class="btn btn-<button type="button"><em class="glyphicon glyphicon-align-center"></em> 중</button> <button class="btn btn-<button type="button"><em class="glyphicon glyphicon-align-right"></em> 우</button> <button class="btn btn-<button type="button"><em class="glyphicon glyphicon-align-justify"></em> 전</button>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-4 column">
</div>
<div class="col-md-4 column">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-4 column">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
</div>
</div>
</body>
</html>

결과는 다음과 같습니다:

관련 참조:

http://www.runoob.com/bootstrap/bootstrap-environment-setup.html

http://www.runoob.com/try/bootstrap/layoutit/

위에 설명된 것은 편집자가 여러분께 소개한 Bootstrap 입문 교본(1)의 시각적 레이아웃입니다. 여러분의 도움이 되길 바랍니다. 어떤 질문이나 의문이 있으시면 댓글을 달아 주시고, 편집자가 즉시 답변 드리겠습니다. 또한, 얼리어답터들의 얼리어답터 튜토리얼 웹사이트에 대한 지원에 깊이 감사드립니다!

성명서: 본 문서는 인터넷에서 수집된 내용으로, 원작자의 소유물입니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 사이트는 소유권을 가지지 않으며, 인공적인 편집을 하지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있으시면 이메일을 보내 주시기 바랍니다: notice#oldtoolbag.com（이메일 보내는 경우, #을 @으로 변경하시고, 관련 증거를 제공하시면, 해당 사이트는 즉시 저작권 침해 내용을 삭제합니다.}

기본 튜토리얼
좋아하는 것