دليل أساسي Bootstrap

إضافات Bootstrap

مقدمة إلى الملحقات Bootstrap Bootstrap Well

إنشاء صفحة ويب باستخدام Bootstrap

سنقوم الآن بإنشاء صفحة ردية بسيطة باستخدام Bootstrap3.

قبل أن نبدأ في التعلم، يمكننا أن نرى النتيجة أولاً:https://ar.oldtoolbag.com/run/html/bootstrap-first-website-demo.html

كود HTML

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - صفحة بسيطة</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
　　　　.fakeimg {
　　　　　　　　height: 200px;
　　　　　　　　　background: #aaa;
　　　　}
　　</style>
</head>
<body>
<div　class="jumbotron　text-center"　style="margin-bottom:0">
　　<h1>صفحة Bootstrap الاولى</h1>
　　<p>أعد تحديد حجم نافذة المتصفح لرؤية التأثير!</p>　
</div>
<nav class="navbar navbar-inverse">
　　<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="#">اسم الموقع</a>
　　　　</div>
　　　　<div class="collapse navbar-collapse" id="myNavbar">
　　　　　　<ul class="nav navbar-nav">
　　　　　　　　<li class="active"><a href="#">الصفحة الرئيسية</a></li>
　　　　　　　　<li><a href="#">صفحة 2</a></li>
　　　　　　　　<li><a href="#">صفحة 3</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</nav>
<div class="container">
　　<div class="row">
　　　　<div class="col-sm-4">
　　　　　　<h2>عني</h2>
　　　　　　<h5>صورتي:</h5>
　　　　　　<div class="fakeimg">إدراج صورة هنا</div>
　　　　　　<p>مقدمة عني...</p>
　　　　　　<h2>رابط</h2>
　　　　　　<p>نص الوصف.</p>
　　　　　　<ul class="nav nav-pills nav-stacked">
　　　　　　　　<li class="active"><a href="#">رابط 1</a></li>
　　　　　　　　<li><a href="#">رابط 2</a></li>
　　　　　　　　<li><a href="#">رابط 3</a></li>
　　　　　　</ul>
　　　　　　<hr class="hidden-sm hidden-md hidden-lg">
　　　　</div>
　　　　<div class="col-sm-8">
　　　　　　<h2>عنوان</h2>
　　　　　　<h5>عنوان فرعي</h5>
　　　　　　<div class="fakeimg">صورة</div>
　　　　　　<p>بعض النص...</p>
　　　　　　<p>موقع تعليمية الأساس، تعلم الأساسيات، حتى تستطيع الذهاب أبعد！！！موقع تعليمية الأساس، تعلم الأساسيات، حتى تستطيع الذهاب أبعد！！！موقع تعليمية الأساس، تعلم الأساسيات، حتى تستطيع الذهاب أبعد！！！</p>
　　　　　　<br>
　　　　　　<h2>عنوان</h2>
　　　　　　<h5>عنوان فرعي</h5>
　　　　　　<div class="fakeimg">صورة</div>
　　　　　　<p>بعض النص...</p>
　　　　　　<p>موقع تعليمية الأساس، تعلم الأساسيات، حتى تستطيع الذهاب أبعد！！！موقع تعليمية الأساس، تعلم الأساسيات، حتى تستطيع الذهاب أبعد！！！موقع تعليمية الأساس، تعلم الأساسيات، حتى تستطيع الذهاب أبعد！！！</p>
　　　　</div>
　　</div>
</div>
<div　class="jumbotron　text-center"　style="margin-bottom:0">
　　<p>محتوى القاعدة</p>
</div>
</body>
</html>

اختبار راجع ‹/›

مقدمة إلى الملحقات Bootstrap Bootstrap Well