English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل أساسي Bootstrap

إضافات Bootstrap

Well Bootstrap

Well هي نوع من العناصر التي تسبب عرض المحتوى بشكل انحناء أو تأثير رسمي <div>. من أجل إنشاء Well، يكفي ببساطة وضع المحتوى في العنصر .well في <div>. في المثال التالي، يتم عرض Well افتراضي:

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap مثال - Well الافتراضي</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>
</head>
<body>
<div class="well">مرحبًا، أنا في Well!</div>
</body>
</html>
اختبار النظرية ‹/›

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

حجم

يمكنك استخدام الفئات الاختيارية well-lg أو well-sm لتحديد حجم Well. هذه الفئات هي .well استخدام الفئات معًا. هذه الفئات تؤثر على الهوامش الداخلية (padding)، وفقًا للفئة المستخدمة، سيظهر Well أكبر أو أصغر.

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap مثال - حجم Well</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>
</head>
<body>
<div　class="well　well-lg">مرحبًا، أنا في Well كبير!</div>
<div　class="well　well-sm">مرحبًا، أنا في Well صغير!</div>
</body>
</html>
اختبار النظرية ‹/›

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

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