دليل أساسي Bootstrap

إضافات Bootstrap

مثال على نظام الشبكة Bootstrap: هاتف، جهاز لوحي، جهاز كمبيوتر مثال على نظام الشبكة Bootstrap: رفيع

مثال نظام الشبكةBootstrap: أجهزة متوسطة وضخمة

في مثال: مستويات رأسية مدمجة في هذا المثال، نظرنا إلى نظام الشبكة الأساسي. هنا، نستخدم divتين، ونقسمهما إلى 50/50 من عرض الشاشة:

<div>...</div>
<div>...</div>

لكن، في الأجهزة الكبيرة، ستكون النسبة النهائية 33/66%. لذا، ما علينا القيام به هو إعداد تغيير عرض الأعمدة عند نقاط التحويل:

<div>...</div>
<div>...</div>

الآن، في الأجهزة المتوسطة، سيتم البحث عن الصفحات التي تحتوي على md الصفحات، واستخدموها. في الأجهزة الكبيرة، سيتم البحث عن الصفحات التي تحتوي على lg الصفحات، واستخدموها. في هذا المثال، divاننا سينقسمان من 50/50 إلى 33/66%. يرجى النظر في المثال أدناه للتحقق. (في هذا المثال، تم تعريف النمط لكل عمود بشكل منفرد، يمكنك تجنب القيام بذلك.)

مثال عبر الإنترنت

مثال

<!DOCTYPE html>
<html>
<head>
　　　<title>Bootstrap مثال - أجهزة متوسطة وضخمة</title>
　　　<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
　　　<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>مرحبًا، العالم!</h1>
　　　<div class="row">
　　　　　　<div class="col-md-6 col-lg-4"　style="background-color: #dedef8;　
　　　　　　　　　box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<p>اللوريم إيبسوم، ألم، لكن لا يوجد أحد لا يرى أنه يجب أن يكون الألم حقيقيًا بسبب الألم نفسه، يُظهر الشجاعة　
　　　　　　　　　　　　الوقت يمر، ونحن نعمل بجد ونحمل الألم الكبير، ولكن　
　　　　　　　　　　　　لأنه يجب أن يكون لدينا أقل قدر من العدالة، من الذي لن يأخذ بعض العمل الذي نفعله　
　　　　　　　　　　　　ليس إلا لتحقيق الراحة من خلال الاستمتاع بهذا　
　　　　　　　　　</p>
　　　　　　　　　<p>لكن يجب أن نرى من أين جاء هذا الخطأ الذي أصابنا، والسعادة التي نحصل عليها　
　　　　　　　　　　　　الذنب والألم يُظهران الشجاعة، الكل يظهر، وأيضا نفسه　
　　　　　　　　　　　　ما الذي اخترعه هذا الرجل من الحقائق، وكما يفعل المهندس المعماري في حياته السعيدة　
　　　　　　　　　　　　المقولات يجب أن تكون واضحة　
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="col-md-6 col-lg-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<p>لكن يجب أن نرى من أين جاء هذا الخطأ الذي أصابنا، والسعادة التي نحصل عليها　
　　　　　　　　　　　　الذنب والألم يُظهران الشجاعة
　　　　　　　　　</p>
　　　　　　　　　<p>لا يوجد أحد لا يرى أنه يجب أن يكون الألم حقيقيًا بسبب الألم نفسه　
　　　　　　　　　　　　مكون، يرغب في الإشتهاء، ولكن لا يعلم كيفية الإشتهاء　
　　　　　　　　　　　　tempora incidunt ut labore et dolore magnam aliquam quaerat　
　　　　　　　　　　　　voluptatem.　
　　　　　　　　　</p>
　　　	</div>
　　</div>
</div>
</body>
</html>

اختبار النظر في ‹/›

النتيجة كما يلي:

مثال على نظام الشبكة Bootstrap: هاتف، جهاز لوحي، جهاز كمبيوتر مثال على نظام الشبكة Bootstrap: رفيع