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

Bootstrap تعليمات أساسية

Bootstrap الإضافة

أزرار Bootstrap

سيعرض هذا الفصل كيفية استخدام زر Bootstrap عبر أمثلة. أي عنصر يحتوي على class .btn العناصر ستورث الوجهة الافتراضية للزر المحدب الأزرق. ولكن Bootstrap يقدم بعض الخيارات لتعريف نمط الزر، كما هو موضح في الجدول التالي:

يمكن استخدام هذه الأنماط على عناصر <a>, <button>, أو <input>:

النوعالوصفexample
.btnإضافة النمط الأساسي للزرجرب
.btn-defaultزر افتراضي/قياسيجرب
.btn-primaryنمط الزر الأصلي (لم يتم استخدامه)جرب
.btn-successيُمثل عملية ناجحةجرب
.btn-infoهذا النمط يمكن استخدامه لزر يظهر معلوماتجرب
.btn-warningيُمثل زر يحتاج إلى استخدام حذرجرب
.btn-dangerيُمثل عملية زر خطيرةجرب
.btn-linkجعل الزر يبدو كرابط (بما أن يبقى سلوك الزر كما هو)جرب
.btn-lgصنع زر كبيرجرب
.btn-smصنع زر صغيرجرب
.btn-xsصنع زر صغير جداًجرب
.btn-blockزر حجم كبير (تمدد إلى 100% من عرض العنصر الأب)جرب
.activeزر تم النقر عليهجرب
.disabledزر معطلجرب

السلسلة التالية توضح جميع classes الأزرار المذكورة أعلاه:

online example

<!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>
</head>
<body>
<-- القالب القياسي للزر -->
<button type="button" class="btn btn-default">زر افتراضي</button>
<!-- يوفر تأثيرًا بصرًا إضافيًا، يحدد العمل الأصلي في مجموعة الأزرار --)
<button type="button" class="btn btn-primary">زر الأصلية</button>
<!-- يشير إلى عمل ناجح أو إجراء إيجابي --)
<button type="button" class="btn btn-success">زر نجاح</button>
<!-- زر معلومات أو تحذير في سياق رسالة --)
<button type="button" class="btn btn-info">زر معلومات</button>
<!-- يشير إلى إجراء يجب أن يؤخذ بحذر --)
<button type="button" class="btn btn-warning">زر تحذير</button>
<!-- يشير إلى عمل خطير أو إجراء سلبي محتمل --)
<button type="button" class="btn btn-danger">زر خطير</button>
<!-- لا يشدد على كونه زرًا، يبدو كرابط، ولكن يبقى سلوك الزر --)
<button type="button" class="btn btn-link">زر رابط</button>
</body>
</html>
تجربة رؤية ‹/›

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

حجم الزر

الجدول التالي يعرض classes المختلفة للحصول على أزرار حجم مختلفة:

فئةالوصف
.btn-lgسيجعل الزر يبدو كبيرًا
.btn-smسيجعل الزر يبدو صغيرًا
.btn-xsسيجعل الزر يبدو صغيرًا بشكل استثنائي
.btn-blockسيؤدي ذلك إلى إنشاء زر مكعب، يغطي عرض العنصر الأب

السلسلة التالية توضح جميع classes الأزرار المذكورة أعلاه:

online example

<!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>
</head>
<body>
<p>
　　　<button type="button" class="btn btn-primary btn-lg">زر الأصلية كبير</button>
　　　<button type="button" class="btn btn-default btn-lg">زر كبير</button>
</p>
<p>
　　　<button type="button" class="btn btn-primary">حجم الأصلية الافتراضي</button>
　　　<button type="button" class="btn btn-default">زر حجم افتراضي</button>
</p>
<p>
　　　<button type="button" class="btn btn-primary btn-sm">زر الأصل الصغير</button>
　　　<button type="button" class="btn btn-default btn-sm">زر صغير</button>
</p>
<p>
　　　<button type="button" class="btn btn-primary btn-xs">زر الأصل الصغير جداً</button>
　　　<button type="button" class="btn btn-default btn-xs">زر صغير جداً</button>
</p>
<p>
　　　<button type="button" class="btn btn-primary btn-lg btn-block">زر الأصل المسطح</button>
　　　<button type="button" class="btn btn-default btn-lg btn-block">زر مسطح</button>
</p>
</body>
</html>
تجربة رؤية ‹/›

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

حالة الزر

يقدم Bootstrap كلاسات لحالات الزر مثل النشاط والتعطيل وما إلى ذلك، وسنقوم بشرحها بالتفصيل أدناه.

الحالة النشطة

سيكون الزر في حالة النشاط مظهره كأنه مضغوط (خلفية داكنة، حواف داكنة، ظل).

الجدول أدناه يظهر الكلاسات التي تجعل عناصر الزر وعناصر القوس نشطة:

عنصرفئة
عنصر زرإضافة .active استخدم الكلاس class لعرض أنه نشط.
عنصر دليلإضافة .active استخدم الكلاس class إلى <a> الزر لعرض أنه نشط.

الامثلة التالية توضح هذا النقطة:

online example

<!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>
</head>
<body>
<p>
	<button type="button" class="btn btn-default btn-lg">زر افتراضي</button>
　　　	<button type="button" class="btn btn-default btn-lg active">زر نشط</button>
</p>
<p>
　　　	<button　type="button"　class="btn　btn-primary　btn-lg　">نقر أصلية</button>
　　　	<button type="button" class="btn btn-primary btn-lg active">زر الأصل النشط</button>
</p>
</body>
</html>
تجربة رؤية ‹/›

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

الحالة غير النشطة

عندما يتم تعطيل الزر، يصبح لونه أضعف بنسبة 50٪ ويخسر التدرج.

الجدول أدناه يظهر الكلاسات التي تجعل عناصر الزر وعناصر القوس غير نشطة:

عنصرفئة
عنصر زرإضافة معطلة خصائص الى <button> زر.
عنصر دليلإضافة معطلة فئة الى <a> زر.

الامثلة التالية توضح هذا النقطة:

online example

<!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>
</head>
<body>
<p>
　　　<button　type="button"　class="btn　btn-default　btn-lg">نقر افتراضي</button>
　　　<button　type="button"　class="btn　btn-default　btn-lg"　disabled="disabled">نقر معطلة</button>
</p>
<p>
　　　<button　type="button"　class="btn　btn-primary　btn-lg　">نقر أصلية</button>
　　　<button　type="button"　class="btn　btn-primary　btn-lg"　disabled="disabled">نقر أصلية معطلة</button>
</p>
<p>
　　　<a　href="#"　class="btn　btn-default　btn-lg"　role="button">رابط</a>
　　　<a　href="#"　class="btn　btn-default　btn-lg　disabled"　role="button">رابط معطلة</a>
</p>
<p>
　　　<a　href="#"　class="btn　btn-primary　btn-lg"　role="button">رابط أصلية</a>
　　　<a　href="#"　class="btn　btn-primary　btn-lg　disabled"　role="button">رابط أصلية معطلة</a>
</p>
</body>
</html>
تجربة رؤية ‹/›

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

علامة النقر

يمكنك استخدام فئة النقر على عناصر <a>، <button> أو <input>، ولكن يُنصح باستخدام فئة النقر على عناصر <button> لتجنب مشاكل عدم التوافق بين المتصفحات.

الامثلة التالية توضح هذا النقطة:

online example

<!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>
</head>
<body>
<a　class="btn　btn-default"　href="#"　role="button">رابط</a>
<button　class="btn　btn-default"　type="submit">النقر</button>
<input　class="btn　btn-default"　type="button"　value="النقر">
<input　class="btn　btn-default"　type="submit"　value="إرسال">
</body>
</html>
تجربة رؤية ‹/›

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

مجموعة الأزرار

يمكن إنشاء مجموعة الأزرار باستخدام .btn-group داخل div مباشرة:

online example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap - أزرار Button (الإضافة) مفتاح اختياري</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="container">
　　<h2>مجموعة الأزرار</h2>
　　<p>استخدام  .btn-group  كلاس لإنشاء مجموعة الأزرار:</p>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>
تجربة رؤية ‹/›

استخدام .btn-group-lg|sm|xs لضبط حجم مجموعة الأزرار:

online example

<!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>
</head>
<body>
<div　class="container">
　　<h2>مجموعة أزرار Button - ضبط حجم الأزرار</h2>
　　<p>باستخدام  .btn-group-*  كلاس لضبط حجم الأزرار المستخدمة في مجموعة الأزرار.</p>
　　<h2>أزرار كبيرة:</h2>
　　<div　class="btn-group　btn-group-lg">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
　　<h2>أزرار حجمافتراضي:</h2>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
　　<h2>أزرار صغيرة:</h2>
　　<div　class="btn-group　btn-group-sm">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
　　<h2>أزرار فائقة الصغر:</h2>
　　<div　class="btn-group　btn-group-xs">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>
تجربة رؤية ‹/›

إذا كنت ترغب في ضبط الأزرار في الاتجاه العمودي يمكنك استخدام .btn-group-vertical كلاس:

online example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　example　-　button</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="container">
　　<h2>مجموعة الأزرار العمودية</h2>
　　<p>إذا كنت ترغب في ضبط الأزرار في الاتجاه العمودي يمكنك استخدام  .btn-group-vertical  كلاس:</p>
　　<div　class="btn-group-vertical">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　</div>
</div>
</body>
</html>
تجربة رؤية ‹/›

مجموعة الأزرار المتكيفة الحجم

يمكن ضبط مجموعة الأزرار المتكيفة الحجم باستخدام .btn-group-justified كلاس.

السطر التالي يستخدم علامة التبويب a لعرضها:

online example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　example　-　button</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="container">
　　<h2>adaptive button group</h2>
　　<p>باستخدام 类 .btn-group-justified لضبط مجموعة الأزرار المتكيفة الحجم。</p>
　　<div　class="btn-group　btn-group-justified">
　　　　<a　href="#"　class="btn　btn-primary">Apple</a>
　　　　<a　href="#"　class="btn　btn-primary">Samsung</a>
　　　　<a　href="#"　class="btn　btn-primary">Sony</a>
　　</div>
</div>
</body>
</html>
تجربة رؤية ‹/›

note: If it is a <button> element, you need to wrap it with the .btn-group class outside:

online example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　example　-　button</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="container">
　　<h2>adaptive button group</h2>
　　<div　class="btn-group　btn-group-justified">
　　　　<div　class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　</div>
　　　　<div　class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　</div>
　　　　<div　class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　　　</div>
　　</div>
</div>
</body>
</html>
تجربة رؤية ‹/›

embedding dropdown menu button group

Buttons in the button group can be set to dropdown menus, as shown in the following example:

online example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　example　-　button</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="container">
　　<h2>embedding button group</h2>
　　<p>embedding button group to create dropdown menu：</p>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">Apple</button>
　　　　<button　type="button"　class="btn　btn-primary">Samsung</button>
　　　　<div　class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　　　　　<ul class="dropdown-menu" role="menu">
　　　　　　　　<li><a href="#">لوحة مفاتيح</a></li>
　　　　　　　　<li><a href="#">هاتف ذكي</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</div>
</body>
</html>
تجربة رؤية ‹/›

split button

online example

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　example　-　button</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="container">
　　<h2>separator button</h2>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-primary">Sony</button>
　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<ul class="dropdown-menu" role="menu">
　　　　　　<li><a href="#">لوحة مفاتيح</a></li>
　　　　　　<li><a href="#">هاتف ذكي</a></li>
　　　　</ul>
　　</div>
</div>
</body>
</html>
تجربة رؤية ‹/›
صور Bootstrapنماذج Bootstrap