부트스트랩 테마 "Simply Me"
테마 만들기: "Simply Me"
이 페이지에서는 부트스트랩 테마를 처음부터 빌드하는 방법을 보여줍니다.
우리는 간단한 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>
부트스트랩 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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
컨테이너 내부의 텍스트 중앙에 클래스를 추가합니다.
예시
<head>
<style>
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
</style>
</head>
<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
클래스 를 사용하여 이미지를 원으로 만듭니다.
예시
<img src="bird.jpg" class="img-circle" alt="Bird">
결과:
나는 누구인가?
나는 모험가다
더 많은 콘텐츠
더 많은 콘텐츠를 추가하고 새 컨테이너에 넣습니다.
예시
<head>
<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>
</head>
<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>
결과:
나는 누구인가?
나는 모험가다
난 뭘까?
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다. 대부분의 경우 우리 중 누구라도 고용의 목적을 활용하는 것을 제외하고는 모든 종류의 고용을 행사하게 될 것입니다.
어디에서 나를 찾을 수 있습니까?
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다. 대부분의 경우 우리 중 누구라도 고용의 목적을 활용하는 것을 제외하고는 모든 종류의 고용을 행사하게 될 것입니다.
패딩 추가
패딩을 추가하여 컨테이너를 보기 좋게 만들 수 있습니다.
예시
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
결과:
나는 누구인가?
나는 모험가다
난 뭘까?
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다. 대부분의 경우 우리 중 누구라도 고용의 목적을 활용하는 것을 제외하고는 모든 종류의 고용을 행사하게 될 것입니다.
어디에서 나를 찾을 수 있습니까?
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다. 대부분의 경우 우리 중 누구라도 고용의 목적을 활용하는 것을 제외하고는 모든 종류의 고용을 행사하게 될 것입니다.
버튼 추가
중간 컨테이너에 버튼 추가:
예시
<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>
결과:
난 뭘까?
고통 그 자체가 사랑의 고통, 주요 생태학적 문제이지만 나는 이런 종류의 시간을 내서 넘어지게 하여 어떤 큰 고통과 고통을 줍니다. 대부분의 경우 우리 중 누구라도 고용의 목적을 활용하는 것을 제외하고는 모든 종류의 고용을 행사하게 될 것입니다.
찾다아이콘 추가
"검색" 버튼에 검색 아이콘 추가:
예시
<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>
결과:
어디에서 나를 찾을 수 있습니까?
통증 자체도 중요하지만 아디피싱 과정에 의해 통증이 더 커지는데, 큰 일을 할 수 있도록 통증을 줄이는 시간을 드리고 있습니다.
통증 자체도 중요하지만 아디피싱 과정에 의해 통증이 더 커지는데, 큰 일을 할 수 있도록 통증을 줄이는 시간을 드리고 있습니다.
통증 자체도 중요하지만 아디피싱 과정에 의해 통증이 더 커지는데, 큰 일을 할 수 있도록 통증을 줄이는 시간을 드리고 있습니다.
반응형 이미지 만들기
.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">
탐색 모음 추가
Add a standard navigation bar at the top of the page with and make it collapsible on smaller screens:
Example
<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>
Result:
Style The Navbar
Use CSS to customize the navigation bar:
Example
.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;
}
Result:
Add a Footer
Add a footer and use CSS to style it:
Example
<style>
.bg-4 {
background-color: #2f2f2f;
color: #ffffff;
}
</style>
<footer class="container-fluid bg-4 text-center">
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com">www.w3schools.com</a></p>
</footer>
Result:
Final Touch
Personalize your Theme by adding a font that you like. We have used "Montserrat" from Google's Font Library.
Link to the font in the
<head>
section:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
Then you can use it in the page:
Example
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}
We have also created a "helper" margin class to add extra space
where we think it's needed; usually after each <h3>
and <img>
element.
Example
.margin {margin-bottom: 45px;}