إنشاء موضوع: "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 كندي ووضع عناصر في الحاويات
إضافة Bootstrap كندي وتصل إلى مسج ووضع عناصر 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>نتيجة:
من انا؟
أنا مغامر
ما أنا؟
أبجد هوز دولور الجلوس امات، consectetur adipiscing إيليت، حوار لا tempor eiusmod التحرير incididunt labore آخرون غير مؤلمة ماجنا aliqua. التحرير ENIM إعلان قطرة veniam، quis nostrud exercitation ullamco رقة العمل احترازيا التحرير aliquip السابق عصام commodo consequat.
حيث لإيجاد البيانات؟
أبجد هوز دولور الجلوس امات، consectetur adipiscing إيليت، حوار لا tempor eiusmod التحرير incididunt labore آخرون غير مؤلمة ماجنا aliqua. التحرير ENIM إعلان قطرة veniam، quis nostrud exercitation ullamco رقة العمل احترازيا التحرير aliquip السابق عصام commodo consequat.
إضافة الحشو
يتيح جعل حاويات تبدو جيدة عن طريق إضافة بعض الحشو:
مثال
<style>
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
</style>نتيجة:
من انا؟
أنا مغامر
ما أنا؟
أبجد هوز دولور الجلوس امات، consectetur adipiscing إيليت، حوار لا tempor eiusmod التحرير incididunt labore آخرون غير مؤلمة ماجنا aliqua. التحرير ENIM إعلان قطرة veniam، quis nostrud exercitation ullamco رقة العمل احترازيا التحرير aliquip السابق عصام commodo consequat.
حيث لإيجاد البيانات؟
أبجد هوز دولور الجلوس امات، consectetur adipiscing إيليت، حوار لا tempor eiusmod التحرير incididunt labore آخرون غير مؤلمة ماجنا aliqua. التحرير ENIM إعلان قطرة veniam، quis nostrud exercitation ullamco رقة العمل احترازيا التحرير aliquip السابق عصام 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>
نتيجة:
ما أنا؟
أبجد هوز دولور الجلوس امات، consectetur adipiscing إيليت، حوار لا tempor eiusmod التحرير incididunt labore آخرون غير مؤلمة ماجنا aliqua. التحرير ENIM إعلان قطرة veniam، quis nostrud exercitation ullamco رقة العمل احترازيا التحرير aliquip السابق عصام 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>نتيجة:
حيث لإيجاد البيانات؟
أبجد هوز دولور الجلوس امات، consectetur adipisicing إيليت، حوار لا tempor eiusmod التحرير incididunt labore آخرون غير مؤلمة ماجنا aliqua.
أبجد هوز دولور الجلوس امات، consectetur adipisicing إيليت، حوار لا tempor eiusmod التحرير incididunt labore آخرون غير مؤلمة ماجنا aliqua.
أبجد هوز دولور الجلوس امات، consectetur adipisicing إيليت، حوار لا tempor eiusmod التحرير incididunt labore آخرون غير مؤلمة ماجنا 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"> انها محاولة لنفسك » إضافة نافبار
إضافة شريط التنقل القياسية في أعلى الصفحة مع وجعلها قابلة للطي على شاشات أصغر حجما:
مثال
<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>نتيجة:
انها محاولة لنفسك »إن أسلوب نافبار
استخدام 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>نتيجة:
انها محاولة لنفسك »اللمسة الأخيرة
إضفاء الطابع الشخصي على الموضوع الخاص بك عن طريق إضافة الخط الذي تريد. وقد استخدمنا "مونتسيرات" من مكتبة الخط جوجل.
تصل إلى الخط في <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> عنصر.