دليل تعلم Bootstrap4 الأساسي

مجموعة النقرات Bootstrap4 مربع إعلام Bootstrap4

النقرات Bootstrap4

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

Bootstrap 4 يقدم أنماط مختلفة من الأزرار.

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>نمط الزر</h2>
　　<button type="button" class="btn">زر أساسي</button>
　　<button type="button" class="btn btn-primary">مفتاح رئيسي</button>
　　<button type="button" class="btn btn-secondary">زر ثانوي</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-dark">أسود</button>
　　<button type="button" class="btn btn-light">فاتح</button>
　　<button type="button" class="btn btn-link">رابط</button>　　　　　　
</div>
</body>
</html>

اختبار النظر <‹/›

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

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>عناصر الزر</h2>
　　<a href="#" class="btn btn-info" role="button">زر الرابط</a>
　　<button type="button" class="btn btn-info">زر</button>
　　<input type="button" class="btn btn-info" value="زر المدخل">
　　<input type="submit" class="btn btn-info" value="زر التقدم">　
</div>
</body>
</html>

اختبار النظر <‹/›

إعداد حواف الزر

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>إعداد حواف الزر</h2>
　　<button type="button" class="btn btn-outline-primary">زر رئيسي</button>
　　<button type="button" class="btn btn-outline-secondary">زر ثانوي</button>
　　<button type="button" class="btn btn-outline-success">نجاح</button>
　　<button type="button" class="btn btn-outline-info">معلومات</button>
　　<button type="button" class="btn btn-outline-warning">تحذير</button>
　　<button type="button" class="btn btn-outline-danger">مخاطرة</button>
　　<button type="button" class="btn btn-outline-dark">أسود</button>
　　<button type="button" class="btn btn-outline-light text-dark">فاتح</button>
</div>
</body>
</html>

اختبار النظر <‹/›

أحجام مختلفة من الأزرار

Bootstrap 4 يمكن تعيين حجم الأزرار:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>أحجام مختلفة من الأزرار
　　<button type="button" class="btn btn-primary btn-lg">زر كبير</button>
　　<button type="button" class="btn btn-primary">زر افتراضي</button>
　　<button type="button" class="btn btn-primary btn-sm">زر صغير</button>
</div>
</body>
</html>

اختبار النظر <‹/›

الزر الكبير

بإضافة صفت .btn-block يمكن تعيين زر كبير الحجم:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>الزر الكبير
　　<button type="button" class="btn btn-primary btn-block">زر 1</button>
　　<button type="button" class="btn btn-default btn-block">زر 2</button>
　　<h2>النص الكبير للزر
　　<button type="button" class="btn btn-primary btn-lg btn-block">زر 1</button>
　　<button type="button" class="btn btn-default btn-lg btn-block">زر 2</button>
　　<h2>الزر المدمج الصغير</h2>
　　<button type="button" class="btn btn-primary btn-sm btn-block">زر 1</button>
　　<button type="button" class="btn btn-default btn-sm btn-block">زر 2</button>
</div>
</body>
</html>

اختبار النظر <‹/›

الزر النشط والممنوع من النقر

يمكن تعيين الزر إلى حالة نشطة أو غير قابل للنقر.

صيغة .active يمكنها تعيين الزر كقابل الاستخدام، وخصائص disabled يمكنها تعيين الزر كغير قابل للنقر. لاحظ أن عنصر <a> لا يدعم disabled الميزات، يمكنك من خلال إضافة صيغة .disabled لمنع النقر على الروابط.

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap مثال</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>حالة المفتاح</h2>
　　<button type="button" class="btn btn-primary">مفتاح رئيسي</button>
　　<button type="button" class="btn btn-primary active">مفتاح بعد النقر</button>
　　<button type="button" class="btn btn-primary" disabled>مفتاح غير قابلة للنقر</button>
　　<a href="#" class="btn btn-primary disabled">رابط غير قابلة للنقر</a>
</div>
</body>
</html>

اختبار النظر <‹/›

مجموعة النقرات Bootstrap4 مربع إعلام Bootstrap4