Bootstrap ธีม"Simply Me"
สร้างธีม: "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="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;}