Bootstrap အပြင်အဆင် "ရိုးရှင်းစွာငါ့ကို"
ဆောင်ပုဒ်တစ်ခု ဖန်တီးပါ- "ရိုးရှင်းစွာ ကျွန်ုပ်"
ဤစာမျက်နှာသည် သင့်အား 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 ထည့်ပြီး Container တွင် Elements များထည့်ပါ။
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>
ရလဒ်:
ငါဘယ်သူလဲ?
ကျွန်တော်က စွန့်စားသူတစ်ယောက်ပါ။
ငါကဘာလဲ?
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။ သို့မှသာ အများစုအတွက်၊ ကျွန်ုပ်တို့ထဲမှ မည်သူတစ်ဦးတစ်ယောက်သည် ယင်းမှ ရည်ရွယ်ချက်များကို အခွင့်ကောင်းယူရန်မှတပါး မည်သည့်အလုပ်အကိုင်မျိုးကိုမဆို ကျင့်သုံးလာမည်ဖြစ်သည်။
ငါ့ကိုဘယ်မှာရှာရမလဲ
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။ သို့မှသာ အများစုအတွက်၊ ကျွန်ုပ်တို့ထဲမှ မည်သူတစ်ဦးတစ်ယောက်သည် ယင်းမှ ရည်ရွယ်ချက်များကို အခွင့်ကောင်းယူရန်မှတပါး မည်သည့်အလုပ်အကိုင်မျိုးကိုမဆို ကျင့်သုံးလာမည်ဖြစ်သည်။
Padding ထည့်ပါ။
အကွက်အချို့ထည့်ခြင်းဖြင့် ကွန်တိန်နာများကို ကြည့်ကောင်းအောင်ပြုလုပ်ကြပါစို့။
ဥပမာ
<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>
ရလဒ်:
ငါကဘာလဲ?
ဝေဒနာကိုယ်တိုင်က ဝေဒနာရဲ့ အဓိက ဂေဟဗေဒဆိုင်ရာ ပြဿနာတွေကို တပ်မက်မှု ဖြစ်ပေမယ့် ပြိုလဲဖို့ ဒီလိုမျိုး အချိန်ပေးလိုက်တာ ဆိုတော့ ကြီးစွာသော ဝေဒနာနဲ့ ဝေဒနာ။ သို့မှသာ အများစုအတွက်၊ ကျွန်ုပ်တို့ထဲမှ မည်သူတစ်ဦးတစ်ယောက်သည် ယင်းမှ ရည်ရွယ်ချက်များကို အခွင့်ကောင်းယူရန်မှတပါး မည်သည့်အလုပ်အကိုင်မျိုးကိုမဆို ကျင့်သုံးလာမည်ဖြစ်သည်။
ရှာရန်Icon တစ်ခုထည့်ပါ။
"Search" ခလုတ်တွင် ရှာဖွေမှုအိုင်ကွန်ကို ထည့်ပါ-
ဥပမာ
<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>
ရလဒ်:
ငါ့ကိုဘယ်မှာရှာရမလဲ
နာကျင်မှုကိုယ်တိုင်က အရေးကြီးသော်လည်း နာကျင်မှုကို adipiscing လုပ်ငန်းစဉ်ဖြင့် မြှင့်တင်ပေးသော်လည်း ကြီးကျယ်သောအလုပ်နှင့် နာကျင်မှုကို ဖြတ်တောက်ရန် အချိန်ပေးပါသည်။
နာကျင်မှုကိုယ်တိုင်က အရေးကြီးသော်လည်း နာကျင်မှုကို adipiscing လုပ်ငန်းစဉ်ဖြင့် မြှင့်တင်ပေးသော်လည်း ကြီးကျယ်သောအလုပ်နှင့် နာကျင်မှုကို ဖြတ်တောက်ရန် အချိန်ပေးပါသည်။
နာကျင်မှုကိုယ်တိုင်က အရေးကြီးသော်လည်း နာကျင်မှုကို adipiscing လုပ်ငန်းစဉ်ဖြင့် မြှင့်တင်ပေးသော်လည်း ကြီးကျယ်သောအလုပ်နှင့် နာကျင်မှုကို ဖြတ်တောက်ရန် အချိန်ပေးပါသည်။
ပုံများကို တုံ့ပြန်မှုပြုလုပ်ပါ။
.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 တစ်ခုထည့်ပါ။
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;}