테마 만들기 : "Simply Me"
이 페이지는 방법을 구축하는 방법을 보여줍니다 Bootstrap 처음부터 테마를.
우리는 간단한 HTML 페이지로 시작, 우리는 완전히 기능적인 개인 및 응답 웹 사이트가 될 때까지, 더 많은 구성 요소를 추가합니다.
결과는 다음과 같을 것입니다, 당신이 사용하거나 그것으로 원하는 무엇이든, 수정, 공유, 저장 무료입니다 :
HTML 시작 페이지
우리는 다음과 같은 HTML 페이지를 시작합니다 :
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap
Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</body>
</html>추가 Bootstrap CDN 및 컨테이너의 요소를 넣어
추가 Bootstrap CDN 및 jQuery를에 대한 링크 및 컨테이너 내부 HTML 요소 입력 :
예
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap
Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
</body>
</html>결과:
누구에게 있습니까?
나는 모험가 해요
배경 색상 및 센터 텍스트 추가
1. 배경 색상을 추가 할 컨테이너에 사용자 정의 클래스 (.bg-1)를 추가합니다.
2. 추가 .text-center 컨테이너 내부의 텍스트를 중앙에 클래스를 :
예
<style>
.bg-1 {
background-color: #1abc9c;
/* Green */
color: #ffffff;
}
</style>
<body>
<div class="container-fluid
bg-1
text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
</body>결과:
누구에게 있습니까?
나는 모험가 해요
원 이미지
와 원에 이미지 모양 .img-circle 클래스를 :
자세한 내용
더 많은 콘텐츠를 추가하고 새로운 용기 안에 넣어 :
예
<style>
.bg-1 {
background-color: #1abc9c;
/* Green */
color: #ffffff;
}
.bg-2 {
background-color:
#474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff;
/* White */
color: #555555;
}
</style>
<body>
<div class="container-fluid
bg-1
text-center">
<h3>Who Am I?</h3>
<img src="bird.jpg" class="img-circle" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
<div class="container-fluid bg-2 text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
</div>
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<p>Lorem ipsum..</p>
</div>
</body>결과:
누구에게 있습니까?
나는 모험가 해요
난 무엇인가?
가 lorem ipsum의 슬픔은, AMET 앉아 consectetur adipiscing ELIT, eiusmod incididunt 유타를 tempor 않는 나오지 labore 등 dolore 마그나 aliqua. 유타 enim 광고 미님 veniam, quis의 nostrud exercitation의 ullamco LABORIS의에 NiSi 유타 aliquip 전직 개의 commodo의 consequat.
어디에서 저를 찾으려면?
가 lorem ipsum의 슬픔은, AMET 앉아 consectetur adipiscing ELIT, eiusmod incididunt 유타를 tempor 않는 나오지 labore 등 dolore 마그나 aliqua. 유타 enim 광고 미님 veniam, quis의 nostrud exercitation의 ullamco LABORIS의에 NiSi 유타 aliquip 전직 개의 commodo의 consequat.
패딩 추가
일부 패딩을 추가하여 컨테이너가 좋은 보이게 수 있습니다 :
예
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>결과:
누구에게 있습니까?
나는 모험가 해요
난 무엇인가?
가 lorem ipsum의 슬픔은, AMET 앉아 consectetur adipiscing ELIT, eiusmod incididunt 유타를 tempor 않는 나오지 labore 등 dolore 마그나 aliqua. 유타 enim 광고 미님 veniam, quis의 nostrud exercitation의 ullamco LABORIS의에 NiSi 유타 aliquip 전직 개의 commodo의 consequat.
어디에서 저를 찾으려면?
가 lorem ipsum의 슬픔은, AMET 앉아 consectetur adipiscing ELIT, eiusmod incididunt 유타를 tempor 않는 나오지 labore 등 dolore 마그나 aliqua. 유타 enim 광고 미님 veniam, quis의 nostrud exercitation의 ullamco LABORIS의에 NiSi 유타 aliquip 전직 개의 commodo의 consequat.
버튼을 추가
중앙 컨테이너에 버튼을 추가합니다 :
예
<div class="container-fluid bg-2
text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
<a href="#" class="btn btn-default btn-lg">Search</a>
</div>
결과:
난 무엇인가?
가 lorem ipsum의 슬픔은, AMET 앉아 consectetur adipiscing ELIT, eiusmod incididunt 유타를 tempor 않는 나오지 labore 등 dolore 마그나 aliqua. 유타 enim 광고 미님 veniam, quis의 nostrud exercitation의 ullamco LABORIS의에 NiSi 유타 aliquip 전직 개의 commodo의 consequat.
수색아이콘을 추가
"검색"버튼에 검색 아이콘을 추가합니다 :
예
<a href="#" class="btn btn-default btn-lg">
<span
class="glyphicon glyphicon-search"></span> Search
</a>
결과:
»그것을 자신을 시도세 번째 컨테이너 (그리드 추가) 수정
세 번째 컨테이너 (내부 동일한 폭의 세 개의 열을 추가 .col-sm-4 )
예
<div class="container-fluid bg-3 text-center">
<h3>Where
To Find Me?</h3>
<div class="row">
<div class="col-sm-4">
<p>Lorem
ipsum..</p>
<img src="birds1.jpg" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem
ipsum..</p>
<img src="birds2.jpg" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem
ipsum..</p>
<img src="birds3.jpg" alt="Image">
</div>
</div>
</div>결과:
어디에서 저를 찾으려면?
가 lorem ipsum의 슬픔은, AMET 앉아 consectetur adipisicing ELIT, eiusmod incididunt 유타를 tempor 않는 나오지 labore 등 dolore 마그나 aliqua.
가 lorem ipsum의 슬픔은, AMET 앉아 consectetur adipisicing ELIT, eiusmod incididunt 유타를 tempor 않는 나오지 labore 등 dolore 마그나 aliqua.
가 lorem ipsum의 슬픔은, AMET 앉아 consectetur adipisicing ELIT, eiusmod incididunt 유타를 tempor 않는 나오지 labore 등 dolore 마그나 aliqua.
이미지가 응답 확인
추가 .img-responsive 모든 이미지에 클래스를.
추가 display:inline 첫 번째 이미지가 중심되는 강제로합니다 ( .img-responsive 클래스는 추가 display:block 는 화면의 왼쪽으로 이동하게 이미지로).
당신이 스택 시작할 때 이미지가 화면의 전체 폭에 걸쳐하려면 추가, width:100% 이미지에.
예를 열 때 반응 효과를 볼 수있는 화면 크기를 조정 기억 :
예
<!-- The circular bird -->
<img src="bird.jpg" class="img-responsive
img-circle" style="display:inline" alt="Bird">
<!-- The birds in our grid: -->
<img src="birds1.jpg" class="img-responsive" style="width:100%" alt="Image">
<img
src="birds2.jpg" class="img-responsive" style="width:100%"
alt="Image">
<img
src="birds3.jpg" class="img-responsive" style="width:100%"
alt="Image"> »그것을 자신을 시도 Navbar에 추가
있는 페이지의 상단에 표준 탐색 모음을 추가하고이 작은 화면에 축소합니다
예
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#myNavbar">
<span
class="icon-bar"></span>
<span class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Me</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul
class="nav navbar-nav navbar-right">
<li><a href="#">WHO</a></li>
<li><a href="#">WHAT</a></li>
<li><a href="#">WHERE</a></li>
</ul>
</div>
</div>
</nav>결과:
»그것을 자신을 시도스타일 네비게이션 바에
탐색 모음을 사용자 정의하는 CSS를 사용하여
예
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}결과:
»그것을 자신을 시도바닥 글 추가
바닥 글을 추가하고 스타일을 CSS를 사용 :
예
<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer class="container-fluid bg-4
text-center">
<p> Bootstrap Theme Made By <a href="http://www.w3ii.com">www.w3ii.com</a></p>
</footer>결과:
»그것을 자신을 시도최종 터치
원하는 글꼴을 추가하여 테마 두세요. 우리는 구글의 글꼴 라이브러리에서 "몬 세라"를 사용하고 있습니다.
에서 글꼴 링크 <head> 섹션 :
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
그런 다음 페이지에서 사용할 수 있습니다 :
예
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;} 우리는 또한 우리가 필요한 것 같아요 여분의 공간을 추가하기 위해 "도우미"여유 클래스를 만들었습니다; 일반적으로 각 후 <h3> 와 <img> 요소입니다.