دروس Bootstrap الأساسية

برامج Bootstrap

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

مثال نظام شبكة Bootstrap: تدرج أفقية

دعونا نرى مثالاً لشبكة بسيطة: تحتوي على عمودين، كل عمود يحتوي على جملتين. (في هذا المثال، تم تعريف أنماط لكل عمود، يمكنك تجنب القيام بذلك.)

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

مثال

<!DOCTYPE html>
<html>
<head>
　　　<meta charset="utf-8">
　　　<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" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, 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>Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
			accusantium doloremque laudantium, totam rem aperiam, eaque ipsa　
			quae ab illo inventore veritatis et quasi architecto beatae vitae　
			dicta sunt explicabo.　
			</p>
		</div>
		<div class="col-md-6" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
			accusantium doloremque laudantium.
			</p>
			<p>Neque porro quisquam est, qui dolorem ipsum quaerat, dolor sit amet,　
			consectetur, adipisci velit, sed quia non numquam eius modi　
			tempora incidunt ut labore et dolore magnam aliquam quaerat　
			voluptatem.　
			</p>
		</div>
	</div>
</div>
</body>
</html>

اختبار ل‹/›

النتيجة كما ترون أدناه:

تفاصيل

<div>...</div> العنصر يتم إضافته، تأكد من التوسيط والعرض الأكبر.
بمجرد إضافة الصندوق، يجب أن تفكر في إضافة الأعمدة. إضافة <div>...</div>، وأضف الأعمدة داخل الصف. <div></div>.
كل صف في الشبكة يتكون من 12 وحدة، يمكنك استخدام هذه الوحدات لتحديد حجم الأعمدة. في مثالنا، هناك عقدتان، كل عقدة تتكون من 6 وحدات، أي 6+6=12.

يمكنك تجربة خيارات أخرى أكثر، مثل <div></div> و <div></div> أو <div></div> و <div></div>.

يمكنك تجربة ذلك، ولكن تأكد من أن مجموعها دائمًا 12.

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