BS "Simply Me" temasi
Tema yaratish: "Simply Me"
Ushbu sahifada Bootstrap temasini noldan qanday yaratish ko‘rsatiladi.
Biz oddiy HTML sahifadan boshlaymiz, so‘ngra to‘liq ishlaydigan, shaxsiy va moslashuvchan veb-saytga ega bo‘lgunimizcha unga tobora ko‘proq komponentlar qo‘shib boramiz.
Natija quyidagicha ko‘rinadi. Siz uni bemalol o‘zgartirishingiz, saqlashingiz, ulashishingiz, ishlatishingiz yoki u bilan xohlaganingizni qilishingiz mumkin:
Boshlang‘ich HTML sahifa
Quyidagi HTML sahifadan boshlaymiz:
<!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’ini qo‘shing va elementlarni konteynerga joylang
Bootstrap CDN’i va jQuery havolasini qo‘shing hamda HTML elementlarini konteyner ichiga joylang:
Misol
<!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>
Natija:
Who Am I?
I'm an adventurer
Fon rangini qo‘shing va matnni markazlashtiring
1. Fon rangi qo‘shish uchun konteynerga maxsus klass (.bg-1) qo‘shing.
2. Konteyner ichidagi matnni markazlashtirish uchun .text-center klassini qo‘shing:
Misol
<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>
Natija:
Who Am I?
I'm an adventurer
Doira shaklidagi rasm
.img-circle klassi yordamida rasmni doira shakliga keltiring:
Misol
<img src="bird.jpg" class="img-circle" alt="Bird">
Natija:
Who Am I?
I'm an adventurer
Qo‘shimcha kontent
Yana kontent qo‘shing va uni yangi konteynerlar ichiga joylang:
Misol
<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>
Natija:
Who Am I?
I'm an adventurer
What Am I?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Where To Find Me?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ichki chekinish (padding) qo‘shing
Keling, biroz ichki chekinish (padding) qo‘shib, konteynerlarni chiroyli ko‘rinishga keltiramiz:
Misol
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>
Natija:
Who Am I?
I'm an adventurer
What Am I?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Where To Find Me?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tugma qo‘shing
O‘rtadagi konteynerga tugma qo‘shing:
Misol
<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>
Natija:
What Am I?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
SearchBelgi (icon) qo‘shing
"Search" tugmasiga qidiruv belgisini qo‘shing:
Misol
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
Natija:
O‘zingiz sinab ko‘ring »Uchinchi konteynerni o‘zgartiring (grid qo‘shing)
Uchinchi konteyner ichiga teng kenglikdagi uchta ustun qo‘shing (.col-sm-4):
Misol
<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>
Natija:
Where To Find Me?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Rasmlarni moslashuvchan qiling
Barcha rasmlarga .img-responsive klassini qo‘shing.
Birinchi rasmni majburan markazlashtirish uchun unga display:inline ni qo‘shing (.img-responsive klassi rasmga display:block ni qo‘shadi, bu esa uni ekranning chap tomoniga siljitib yuboradi).
Agar rasm ustma-ust joylasha boshlaganda ekranning butun kengligini egallashini istasangiz, rasmga width:100% ni qo‘shing.
Misolni ochganingizda moslashuvchanlik effektini ko‘rish uchun ekran o‘lchamini o‘zgartirishni unutmang:
Misol
<!-- 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">
O‘zingiz sinab ko‘ring »
Navigatsiya paneli (navbar) qo‘shing
Sahifaning yuqori qismiga standart navigatsiya panelini qo‘shing va uni kichikroq ekranlarda yig‘iladigan qiling:
Misol
<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>
Natija:
Navigatsiya panelini bezang
Navigatsiya panelini sozlash uchun CSS’dan foydalaning:
Misol
.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;
}
Natija:
Pastki qism (footer) qo‘shing
Pastki qism (footer) qo‘shing va uni CSS yordamida bezang:
Misol
<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>
Natija:
Yakuniy ishlov
O‘zingizga yoqqan shriftni qo‘shib, temangizni shaxsiylashtiring. Biz Google shriftlar kutubxonasidagi "Montserrat" shriftidan foydalandik.
<head> bo‘limida shriftga havola qo‘shing:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
So‘ngra undan sahifada foydalanishingiz mumkin:
Misol
body {
font: 20px "Montserrat", sans-serif;
line-height: 1.8;
color: #f5f6f7;
}
p {font-size: 16px;}
Shuningdek, kerak deb hisoblagan joylarimizga qo‘shimcha bo‘sh joy qo‘shish uchun "yordamchi" margin klassini yaratdik; odatda har bir <h3> va <img> elementidan keyin.
To‘liq "Simply Me" temasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!