BS "Band" temasi
Tema yaratish: "The Band"
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 The Band</title>
<meta charset="utf-8">
</head>
<body>
<div>
<h3>THE BAND</h3>
<p>We love music!</p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>
</body>
</html>
Bootstrap CDN’ini va konteyner qo‘shing
Bootstrap CDN’i va jQuery havolasini qo‘shing hamda HTML elementlarini konteyner (.container) ichiga joylang:
Misol
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme The Band</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">
<h3>THE BAND</h3>
<p>We love music!</p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>
</body>
</html>
Natija:
THE BAND
We love music!
We have created a fictional band website. Lorem ipsum..
Matnni markazlashtiring
Konteyner ichidagi matnni markazlashtirish uchun .text-center klassini qo‘shing va "We love music" matnini kursiv qilish uchun <em> elementidan foydalaning:
Misol
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We love music!</em></p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>
Natija:
THE BAND
We love music!
We have created a fictional band website. Lorem ipsum..
Ichki chekinish (padding) qo‘shing
Ichki chekinish (padding) yordamida konteynerni chiroyli ko‘rinishga keltirish uchun CSS’dan foydalaning:
Misol
.container {
padding: 80px 120px;
}
Natija:
THE BAND
We love music!
We have created a fictional band website. Lorem ipsum..
Grid qo‘shing
Teng kenglikdagi uchta ustun (.col-sm-4) yarating, matn va rasmlar qo‘shing hamda ularni konteyner ichiga joylang:
Misol
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We love music!</em></p>
<p>We have created a fictional band website. Lorem ipsum..</p>
<br>
<div class="row">
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
</div>
</div>
Natija:
THE BAND
We love music!
We have created a fictional band website. Lorem ipsum..
Name
Name
Name
Doira shaklidagi rasm
.img-circle klassi yordamida rasmni doira shakliga keltiring.
Shuningdek, rasmlar chiroyli ko‘rinishi uchun biroz CSS qo‘shdik:
Misol
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: 80%;
height: 80%;
opacity: 0.7;
}
.person:hover {
border-color: #f1f1f1;
}
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
Natija:
Name
Name
Name
Yig‘iladigan bloklar
Rasmlarni yig‘iladigan qiling: har bir rasm bosilganda qo‘shimcha kontent ko‘rsatilsin:
Misol
<div class="row">
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
</a>
<div id="demo" class="collapse">
<p>Guitarist and Lead Vocalist</p>
<p>Loves long walks on the beach</p>
<p>Member since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo2" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
</a>
<div id="demo2" class="collapse">
<p>Drummer</p>
<p>Loves drummin'</p>
<p>Member since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo3" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
</a>
<div id="demo3" class="collapse">
<p>Bass player</p>
<p>Loves math</p>
<p>Member since 2005</p>
</div>
</div>
</div>
Natija (effektni ko‘rish uchun rasmlarni bosing):
Name
Guitarist and Lead Vocalist
Loves long walks on the beach
Member since 1988
Name
Drummer
Loves drummin'
Member since 1988
Name
Bass player
Loves math
Member since 2005
Karusel qo‘shing
Karusel yarating va uni konteynerdan oldin qo‘shing:
Misol
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago - A night we won't forget.</p>
</div>
</div>
<div class="item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>LA</h3>
<p>Even though the traffic was a mess, we had the best time.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Natija:
New York
The atmosphere in New York is lorem ipsum.
Chicago
Thank you, Chicago - A night we won't forget.
LA
Even though the traffic was a mess, we had the best time playing at Venice Beach!
Karuselni bezang
Karuselni bezash uchun CSS’dan foydalaning:
Misol
.carousel-inner img {
-webkit-filter: grayscale(90%);
filter: grayscale(90%); /* make all photos black and white */
width: 100%; /* Set width to 100% */
margin: auto;
}
.carousel-caption h3 {
color: #fff !important;
}
@media (max-width: 600px) {
.carousel-caption {
display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
}
}
Natija:
New York
The atmosphere in New York is lorem ipsum.
Chicago
Thank you, Chicago - A night we won't forget.
LA
Even though the traffic was a mess, we had the best time playing at Venice Beach!
Gastrol (Tour) konteynerini qo‘shing
Yangi konteyner qo‘shing va uning ichiga ro‘yxat (.list-group va .list-group-item) qo‘shing.
Konteynerga maxsus klass (.bg-1) qo‘shing (qora fon rangi) va uning ichki elementlariga ba’zi stillar bering:
Misol
<style>
.bg-1 {
background: #2d2d30;
color: #bdbdbd;
}
.bg-1 h3 {color: #fff;}
.bg-1 p {font-style: italic;}
</style>
<div class="bg-1">
<div class="container">
<h3 class="text-center">TOUR DATES</h3>
<p class="text-center">Lorem ipsum we'll play you some music.<br> Remember to book your tickets!</p>
<ul class="list-group">
<li class="list-group-item">September Sold Out!</li>
<li class="list-group-item">October Sold Out!</li>
<li class="list-group-item">November 3</li>
</ul>
</div>
</div>
Natija:
TOUR DATES
Lorem ipsum we'll play you some music.
Remember to book your tickets!
- September Sold Out!
- October Sold Out!
- November 3
Yorliqlar va nishonlar qo‘shing
Mavjud chiptalarni yoki chiptalar sotib bo‘linganini ajratib ko‘rsatish uchun yorliq (.label) va nishon (.badge) qo‘shing:
Misol
<ul class="list-group">
<li class="list-group-item">September <span class="label label-danger">Sold Out!</span></li>
<li class="list-group-item">October <span class="label label-danger">Sold Out!</span></li>
<li class="list-group-item">November <span class="badge">3</span></li>
</ul>
Natija:
TOUR DATES
Lorem ipsum we'll play you some music.
Remember to book your tickets!
- September Sold Out!
- October Sold Out!
- November 3
Eskiz (thumbnail) rasmlarni qo‘shing
Tour konteyneri ichiga teng kenglikdagi uchta ustun (.col-sm-4) qo‘shing:
Har bir ustun ichiga rasm qo‘shing.
So‘ngra rasmni eskiz (thumbnail) ko‘rinishiga keltirish uchun .img-thumbnail klassidan foydalaning.
Odatda .img-thumbnail klassini bevosita <img> elementiga qo‘shasiz. Bu misolda esa rasm matnini ham belgilay olishimiz uchun rasm atrofiga thumbnail konteynerini joylashtirdik.
Misol
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="paris.jpg" alt="Paris">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="newyork.jpg" alt="New York">
<p><strong>New York</strong></p>
<p>Sat. 28 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="San Francisco">
<p><strong>San Francisco</strong></p>
<p>Sun. 29 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
</div>
Natija:
Paris
Fri. 27 November 2015
New York
Sat. 28 November 2015
San Francisco
Sun. 29 November 2015
Ro‘yxatlar, eskizlar va tugmalarni bezang
Ro‘yxat va eskiz rasmlarni bezash uchun CSS’dan foydalaning. Bizning misolimizda ro‘yxatdan yumaloq chegaralarni olib tashladik, eskiz rasmlarni esa chegarasini olib tashlab va har bir rasmga 100% kenglik berib, kartalarga o‘xshatishga harakat qildik.
Shuningdek, Bootstrap’ning .btn klassining standart stillarini o‘zgartirib, uni qora tugmaga aylantirdik:
Misol
/* Remove rounded borders from list */
.list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.list-group-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* Remove border and add padding to thumbnails */
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail p {
margin-top: 15px;
color: #555;
}
/* Black buttons with extra padding and without rounded borders */
.btn {
padding: 10px 20px;
background-color: #333;
color: #f1f1f1;
border-radius: 0;
transition: .2s;
}
/* On hover, the color of .btn will transition to white with black text */
.btn:hover, .btn:focus {
border: 1px solid #333;
background-color: #fff;
color: #000;
}
Natija:
- September Sold Out!
- October Sold Out!
- November 3
Paris
Fri. 27 November 2015
New York
Sat. 28 November 2015
San Francisco
Sun. 29 November 2015
Modal oyna qo‘shing
Avval eskiz ichidagi barcha tugmalarni <button class="btn">Buy Tickets</button> dan <button class="btn" data-toggle="modal"
data-target="#myModal" >Buy Tickets</button> ga o‘zgartiring. Bu tugmalar modal oynaning o‘zini ochish uchun ishlatiladi.
Modal oynani yaratish uchun quyidagi kodga qarang:
Misol
<style>
/* Add a dark gray background color to the modal header and center text */
.modal-header, h4, .close {
background-color: #333;
color: #fff !important;
text-align: center;
font-size: 30px;
}
.modal-header, .modal-body {
padding: 40px 50px;
}
</style>
<!-- Used to open the Modal -->
<button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label>
<input type="number" class="form-control" id="psw" placeholder="How many?">
</div>
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-block">Pay
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
<p>Need <a href="#">help?</a></p>
</div>
</div>
</div>
</div>
Natija (effektni ko‘rish uchun "Buy Tickets" tugmasini bosing):
Aloqa konteynerini qo‘shing
Teng bo‘lmagan kenglikdagi ikkita ustunli (.col-md-4 va .col-md-8) yangi konteyner yarating.
Birinchi ustunga matnli ma’lumot belgilarini, ikkinchisiga esa forma boshqaruv elementlarini qo‘shing:
Misol
<div class="container">
<h3 class="text-center">Contact</h3>
<p class="text-center"><em>We love our fans!</em></p>
<div class="row test">
<div class="col-md-4">
<p>Fan? Drop a note.</p>
<p><span class="glyphicon glyphicon-map-marker"></span>Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email: mail@mail.com</p>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
<div class="row">
<div class="col-md-12 form-group">
<button class="btn pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
Natija:
Contact
We love our fans!
Fan? Drop a note.
Chicago, US
Phone: +00 1515151515
Email: mail@mail.com
Almashtiriladigan tablarni qo‘shing
Aloqa konteyneri ichiga guruh a’zolarining "iqtiboslari" bilan tablar (.nav nav-tabs) qo‘shing:
Misol
<style>
.nav-tabs li a {
color: #777;
}
</style>
<h3 class="text-center">From The Blog</h3>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Mike</a></li>
<li><a data-toggle="tab" href="#menu1">Chandler</a></li>
<li><a data-toggle="tab" href="#menu2">Peter</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h2>Mike Ross, Manager</h2>
<p>Man, we've been on the road for some time now. Looking forward to lorem ipsum.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h2>Chandler Bing, Guitarist</h2>
<p>Always a pleasure people! Hope you enjoyed it as much as I did. Could I BE.. any more pleased?</p>
</div>
<div id="menu2" class="tab-pane fade">
<h2>Peter Griffin, Bass player</h2>
<p>I mean, sometimes I enjoy the show, but other times I enjoy other things.</p>
</div>
</div>
Natija:
From The Blog
Mike Ross, Manager
Man, we've been on the road for some time now. Looking forward to lorem ipsum.
Xarita/joylashuv rasmini qo‘shing
Joylashuv rasmi yoki xaritani qo‘shing (Google xaritalari uchun Google Maps darsligimizni o‘qing):
Misol
<!-- Image of location/map -->
<img src="map.jpg" style="width:100%">
Natija:
Navigatsiya paneli (navbar) qo‘shing
Sahifaning yuqori qismiga kichikroq ekranlarda yig‘iladigan navigatsiya panelini qo‘shing:
Misol
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">HOME</a></li>
<li><a href="#band">BAND</a></li>
<li><a href="#tour">TOUR</a></li>
<li><a href="#contact">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
Natija:
O‘zingiz sinab ko‘ring »Maslahat: Navigatsiya havolalarini navbar-right klassi yordamida o‘ngga tekislang.
Agar navigatsiya panelidagi havolalardan biri ochiluvchi menyu kabi ishlashini istasangiz, .dropdown klassidan foydalaning
Navigatsiya panelini bezang
Navigatsiya panelini sozlash uchun CSS’dan foydalaning:
Misol
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity: 0.9;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}
Natija:
O‘zingiz sinab ko‘ring »Scrollspy qo‘shing
Sahifa aylantirilganda navigatsiya paneli havolalarini avtomatik yangilash uchun scrollspy qo‘shing:
Misol
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="band" class="container">
<div id="tour" class="container">
<div id="contact" class="container">
O‘zingiz sinab ko‘ring »
Pastki qism (footer) qo‘shing
1. <footer> elementini yarating va unga biroz matn qo‘shing.
2. Pastki qismni (footer) bezash uchun CSS’dan foydalaning.
3. Bosilganda foydalanuvchini sahifaning yuqori qismiga olib chiqadigan "Yuqoriga strelka" belgisini qo‘shing.
4. Tooltip plaginini ishga tushirish uchun jQuery’dan foydalaning:
Misol
<style>
/* Add a dark background color to the footer */
footer {
background-color: #2d2d30;
color: #f5f5f5;
padding: 32px;
}
footer a {
color: #f5f5f5;
}
footer a:hover {
color: #777;
text-decoration: none;
}
</style>
<footer class="text-center">
<a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
<span class="glyphicon glyphicon-chevron-up"></span>
</a><br><br>
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com" data-toggle="tooltip" title="Visit w3schools">www.w3schools.com</a></p>
</footer>
<script>
$(document).ready(function(){
// Initialize Tooltip
$('[data-toggle="tooltip"]').tooltip();
})
</script>
Natija:
O‘zingiz sinab ko‘ring »Silliq aylantirishni (smooth scrolling) qo‘shish
jQuery yordamida silliq aylantirishni qo‘shing (navigatsiya panelidagi havolalar bosilganda):
Misol
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
})
</script>
O‘zingiz sinab ko‘ring »
Yakuniy ishlov
O‘zingizga yoqqan shriftni qo‘shib, temangizni shaxsiylashtiring. Biz Google shriftlar kutubxonasidagi "Montserrat" va "Lato" shriftlaridan foydalandik.
<head> bo‘limida shriftga havola qo‘shing:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
So‘ngra ulardan sahifada foydalanishingiz mumkin:
Misol
body {
font: 400 15px/1.8 Lato, sans-serif;
color: #777;
}
.navbar {
font-family: Montserrat, sans-serif;
}
Shuningdek, ba’zi elementlarga qo‘shimcha stillar qo‘shdik:
Misol
/* Overwrite default styles of h3 and h4 */
h3, h4 {
margin: 10px 0 30px 0;
letter-spacing: 10px;
font-size: 20px;
color: #111;
}
/* Remove rounded borders on input fields */
.form-control {
border-radius: 0;
}
/* Disable the ability to resize textareas */
textarea {
resize: none;
}
O‘zingiz sinab ko‘ring »
To‘liq "The Band" temasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!