دليل أساسي لـ Bootstrap

إضافات Bootstrap

مثال على نظام الشبكة Bootstrap: الأجهزة المتوسطة والكبيرة

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

لقد رأينا الأجهزة المتوسطة والكبيرة الآن، دعونا نرى مثالاً آخر، سنقوم بجعله يناسب الهواتف المحمولة الصغيرة أيضًا. سنقوم بتقسيم أعمدة الهواتف اللوحية إلى 25%/75%， وسنضيف الخيارات التالية:

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

الآن، قدم لنا 3 أنواع مختلفة من تصميمات الأعمدة، تناسب ثلاثة أجهزة مختلفة. على الهاتف المحمول، سيكون التصميم 25% على اليسار و75% على اليمين. على أجهزة الهواتف اللوحية، سيكون التصميم 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>Hello, world!</h1>
　　　<div class="row"
　　　　　　<div class="col-sm-3 col-md-6 col-lg-8"　　
　　　　　　　　　style="background-color: #dedef8;　
　　　　　　　　　box-shadow: inset 1px -1px 1px #444;　
　　　　　　　　　box-shadow: inset -1px 1px 1px #444;
　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do　
　　　　　　　　　　　　eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut　
　　　　　　　　　　　　enim ad minim veniam, quis nostrud exercitation ullamco laboris　
　　　　　　　　　　　　nisi ut aliquip ex ea commodo consequat.　
　　　　　　　　　</p>
　　　　　　　　　<p>لكن لماذا لا نرى من أين جاء هذا الخطأ، ومن أين جاء الشعور بالسعادة　
　　　　　　　　　　　　accusantium doloremque laudantium, totam rem aperiam, eaque ipsa　
　　　　　　　　　　　　quae ab illo inventore veritatis et quasi architecto beatae vitae　
　　　　　　　　　　　　dicte sunt explicabo.　
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="col-sm-9 col-md-6 col-lg-4"　
　　　　　　　　　style="background-color: #dedef8;
　　　　　　　　　box-shadow: inset 1px -1px 1px #444;　
　　　　　　　　　box-shadow: 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: الأجهزة المتوسطة والكبيرة