สร้างธีม: "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 ชั้น:
ตัวอย่าง
<img src="bird.jpg"
class="img-circle" alt="Bird">
ผล:
ฉันเป็นใคร?
ผมเป็นนักผจญภัย
เนื้อหาเพิ่มเติม
เพิ่มเนื้อหาเพิ่มเติมและใส่ไว้ในภาชนะบรรจุใหม่:
ตัวอย่าง
<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, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคา UT aliquip อดีต EA commodo consequat
ที่ต้องการหาฉัน?
Lorem Ipsum บังคับ Amet นั่ง, consectetur adipiscing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคา UT aliquip อดีต EA commodo consequat
เพิ่ม Padding
ช่วยทำให้ภาชนะบรรจุที่ดูดีโดยการเพิ่มช่องว่างบางส่วน:
ตัวอย่าง
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>ผล:
ฉันเป็นใคร?
ผมเป็นนักผจญภัย
สิ่งที่ฉัน?
Lorem Ipsum บังคับ Amet นั่ง, consectetur adipiscing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคา UT aliquip อดีต EA commodo consequat
ที่ต้องการหาฉัน?
Lorem Ipsum บังคับ Amet นั่ง, consectetur adipiscing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคา UT aliquip อดีต EA 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, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua Ut enim โฆษณาขีดต่ำที่สุด veniam, โฟน nostrud exercitation ullamco laboris ค้างคา UT aliquip อดีต EA 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, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua
Lorem Ipsum บังคับ Amet นั่ง, consectetur adipisicing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna aliqua
Lorem Ipsum บังคับ Amet นั่ง, consectetur adipisicing Elit, sed ไม่ eiusmod tempor incididunt UT Labore et dolore Magna 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>ผล:
ลองตัวเอง»สไตล์ Navbar
ใช้ 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>ผล:
ลองตัวเอง»สัมผัสสุดท้าย
ปรับแต่งธีมของคุณโดยการเพิ่มตัวอักษรที่คุณชอบ เราได้ใช้ "มอนต์เซอร์รัต" จากห้องสมุด font ของ Google
เชื่อมโยงไปยังตัวอักษรในส่วน <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> องค์ประกอบ