बूटस्ट्रैप थीम "बस मुझे"
एक थीम बनाएं: "सिम्पली मी"
यह पेज आपको दिखाएगा कि स्क्रैच से बूटस्ट्रैप थीम कैसे बनाई जाती है।
हम एक साधारण 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>
बूटस्ट्रैप सीडीएन जोड़ें और तत्वों को कंटेनर में रखें
बूटस्ट्रैप सीडीएन और 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;}