ما هو Bootstrap؟

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

Bootstrap هو إطار عمل يستخدم HTML و CSS و JavaScript لتصميم الويب. وهو مدعوم من قبل جميع المتصفحات الرئيسية مثل Firefox وOpera وChrome إلخ. علاوة على ذلك، يتضمن Bootstrap العديد من الفئات (class)المحددة مسبقًا لتصميمات سهلة على سبيل المثال الأزرار المنسدلة وشريط التنقل و التنبيهات و إنها سريعة الاستجابة بطبيعتها، أي يتغير التخطيط و التصميم تلقائيًا وفقًا للجهاز.

كيف يتم تنصيبه (Setup)؟

يحتاج Bootstrap إلى 3 ملفات على الأقل لتشغيله والتي يمكن تنزيلها من موقع Bootstrap:

  • bootstrap.css (السطر 7): يحتوي هذا الملف على CSS متنوعة من أجل bootstrap.
  • bootstrap.js (السطر 16): يحتوي هذا الملف على العديد من وظائف JavaScript ، مثل القائمة المنسدلة والتنبيهات وما إلى ذلك.
  • jQuery.js (السطر 17): هذا الملف هو مكتبة jQuery التي يمكن تنزيلها من موقع jQuery إنه مطلوب للعمل الصحيح لـ “bootstrap.js”.

كيف يتم تحميل وتضمين الملفات الضرورية لعمل Bootstrap؟

  1. يتم تنزيل هذه الملفات (bootstrap.css, bootstrap.js, jQuery.js)وحفظها داخل مجلد ‘asset’, بعد ذلك، نحتاج إلى تضمين هذه الملفات في مستند HTML على النحو التالي:
 <!DOCTYPE html>
 <html>
 <head>
 <title>Bootstrap Tutorial</title>

 <!-- CSS -->
 <link href="asset/css/bootstrap.min.css" rel="stylesheet">
 <!-- Add Custom CSS below -->

 </head>
 <body>


 <!-- Javascript -->
 <!-- put jQuery.js before bootstrap.min.js; and then add custom jquery -->
 <script src="asset/js/jquery-3.3.1.min.js"></script>
 <script src="asset/js/bootstrap.min.js"></script>
 </body>
 </html>

2. إضافة CDN: هناك طريقة أخرى لتضمين الملفات وهي CDN. في هذه الطريقة ، لا نحتاج إلى تنزيل الملفات ، ولكن توفير روابط لهذه الملفات ، كما هو موضح في السطور 8 و 17 و 19 من الكود أدناه. ملاحظة أنه في هذه الحالة لن يعمل كود في وضع عدم الاتصال بالنت .

 <!DOCTYPE html>
 <html>
 <head>
 <title>Bootstrap Tutorial</title>

 <!-- CSS -->
 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <!-- Add Custom CSS below -->

 </head>
 <body>


 <!-- Javascript -->
 <!-- jQuery -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <!-- Latest compiled and minified JavaScript -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 </body>
 </html>

ملاحظة: في هذا المقال التعليمي ، سوف نستخدم الطريقة الأولى ، أي تنزيل الملفات وتضمينها في مستند html.

تحقق من صحة التنصيب

نكتب هذا الكود للتحقق من صحة تنصيب Bootstrap.

ملاحظة: لا نحتاج إلى حفظ الكود لإنشاء زر “القائمة المنسدلة”. جميع القوالب متوفرة على موقع Bootstrap . انسخ والصق الكود من هناك وقم بتعديل الكود حسب الحاجة.

<!DOCTYPE html>
 <html>
 <head>
 <title>Bootstrap Tutorial</title>

 <!-- CSS -->
 <link href="asset/css/bootstrap.min.css" rel="stylesheet">
 <!-- Add Custom CSS below -->
</head>
 <body>

 <div class="dropdown">
 <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle=
"dropdown" aria-haspopup="true" aria-expanded="true">
 Dropdown
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else here</a></li>
 <li role="separator" class="divider"></li>
 <li><a href="#">Separated link</a></li>
 </ul>
 </div>

 <!-- Javascript -->
 <!-- put jQuery.js before bootstrap.min.js; and then add custom jquery -->
 <script src="asset/js/jquery-3.3.1.min.js"></script>
 <script src="asset/js/bootstrap.min.js"></script>
 </body>
 </html>

صفحة الويب الناتجة هي

ما هو Bootstrap؟
Click on the ‘Dropdown’ button

Grid system

يقسم Bootstrap كل سطر إلى 12 عمودًا. ثم يمكن استخدام الأوامر التالية لتحديد العرض الاعمدة:

  • col-lg-4: سيحدد 4 أعمدة. اختر أي رقم بين 1-12. “lg” للشاشة الكبيرة (على سبيل المثال شاشة كمبيوتر كبيرة).
  • md : col-md-5 = شاشة متوسطة
  • sm :col-sm-3 = شاشة صغيرة
  • xs :col-xs-3 = شاشة صغيرة جدًا
  • col-lg-offset-4: تخطي أول 4 أعمدة. استخدم بشكل مماثل “md” و “sm” و “xs” مع offset

Example

فيما يلي مثال على Grid system. اقرأ محتوى السطور 13-16 أرجو فهمها جيدا.

ملاحظة:

  • لتسهيل التصور ، في الكود أدناه ، يتم استخدام كود CSS (الأسطر 9-21) لملء الأعمدة بالألوان والحدود.
  • يجب تحديد الأعمدة (السطور 28-30) داخل “class “row (السطر 27).
  • أيضًا ، يجب ألا يزيد مجموع عروض الأعمدة عن 12.
  • أخيرًا ، إذا استخدمنا “col-md-4” بدون تحديد “lg” و “sm” و “xs” ، فستكون قاعدة “md” قابلة للتطبيق على شاشة بحجم “lg” ، ولكن ليس على الشاشة ذات الحجم الأصغر “sm” و “xs”. وبالمثل ، إذا استخدمنا “sm” دون تحديد “lg” و “md” و “xs” ، فستكون القاعدة قابلة للتطبيق على الشاشة ذات الحجم الأكبر ، مثل “lg” و “md” ولكن ليس على “xs”
<!DOCTYPE html>
 <html>
 <head>
 <title>Bootstrap Tutorial</title>

 <!-- CSS -->
 <link href="asset/css/bootstrap.min.css" rel="stylesheet">
 <!-- Add Custom CSS below -->
 <style type="text/css">
 .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8,
 .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8,
 .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8,
 .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8 {
 background-color: green;
 color: white;
 font-weight: bold;
 border: 1px solid red;
 height: 3em; /*height of the box*/
 text-align: center; /*vertical center the text*/
 }
 </style>

 </head>

 <body>

 <div class="row">
 <div class="col-md-2 col-xs-4">col-md-2, col-xs-4</div>
 <div class="col-md-6 col-xs-4">col-md-6, col-xs-4</div>
 <div class="col-md-4 col-xs-4">col-md-4, col-xs-4</div>
 </div>


 <!-- Javascript -->
 <!-- put jQuery.js before bootstrap.min.js; and then add custom jquery -->
 <script src="asset/js/jquery-3.3.1.min.js"></script>
 <script src="asset/js/bootstrap.min.js"></script>
 </body>
 </html>

صفحة الويب الناتجة هي

 Bootstrap
Different grid-size (i.e. 2, 6, 4) for ‘medium’ and ‘large’ screen
Bootstrap
Equal grid-size (i.e. 4) for ‘extra small’ and ‘small’ screen

Nested columns

يمكننا أيضًا تقسيم عمود إلى أعمدة صغيرة عن طريق تحديد فئة صف “class “row (السطر 30) داخل العمود (السطر 29) ، كما هو موضح في السطور “29-34”.

<!DOCTYPE html>
 <html>
 <head>
 <title>Bootstrap Tutorial</title>

 <!-- CSS -->
 <link href="asset/css/bootstrap.min.css" rel="stylesheet">
 <!-- Add Custom CSS below -->
 <style type="text/css">
 .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8,
 .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8,
 .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8,
 .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8 {
 background-color: green;
 color: white;
 font-weight: bold;
 border: 1px solid red;
 height: 3em; /*height of the box*/
 text-align: center; /*vertical center the text*/
 }
 </style>

 </head>

 <body>

 <div class="row">
 <div class="col-md-2 col-xs-4">col-md-2, col-xs-4</div>
 <div class="col-md-6 col-xs-4">
 <div class="row">
 <div class="col-xs-6">col-xs-6</div>
 <div class="col-xs-6">col-xs-6</div>
 </div>
 </div>
 <div class="col-md-4 col-xs-4">col-md-4, col-xs-4</div>
 </div>


 <!-- Javascript -->
 <!-- put jQuery.js before bootstrap.min.js; and then add custom jquery -->
 <script src="asset/js/jquery-3.3.1.min.js"></script>
 <script src="asset/js/bootstrap.min.js"></script>
 </body>
 </html>

Offset

يمكننا تخطي الأعمدة باستخدام ” Offset ” كما هو موضح في السطر 27 ؛

<!DOCTYPE html>
 <html>
 <head>
 <title>Bootstrap Tutorial</title>

 <!-- CSS -->
 <link href="asset/css/bootstrap.min.css" rel="stylesheet">
 <!-- Add Custom CSS below -->
 <style type="text/css">
 .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8,
 .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8,
 .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8,
 .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8 {
 background-color: green;
 color: white;
 font-weight: bold;
 border: 1px solid red;
 height: 3em; /*height of the box*/
 text-align: center; /*vertical center the text*/
 }
 </style>
 </head>

 <body>

 <div class="row">
 <div class="col-md-offset-2 col-md-2">col-md-2</div>
 <div class="col-md-8">col-md-8</div>
 </div>


 <!-- Javascript -->
 <!-- put jQuery.js before bootstrap.min.js; and then add custom jquery -->
 <script src="asset/js/jquery-3.3.1.min.js"></script>
 <script src="asset/js/bootstrap.min.js"></script>
 </body>
 </html>

صفحة html المقابلة للكود أعلاه

Bootstrap

Components

بمجرد أن نفهم “html” و “css” و “Bootstrap-grid” ، يصبح استخدام مكونات Bootstrap أمرًا سهلاً. ما عليك سوى نسخ الكود ولصقه من موقع Bootstrap وتعديله وفقًا للمتطلبات.

في هذا القسم ، سوف نستخدم النموذج التالي لجميع الأمثلة الأتية.

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorial</title>
<!-- CSS -->
<link href="asset/css/bootstrap.min.css" rel="stylesheet">
<!-- Add Custom CSS below -->
</head>

<body>
<!-- Javascript -->
<!-- put jQuery.js before bootstrap.min.js; and then add custom jquery -->
<script src="asset/js/jquery-3.3.1.min.js"></script>
<script src="asset/js/bootstrap.min.js"></script>
</body>
</html>

Labels

يتم استخدام class ‘label’ لإنشاء label (السطر 11).

“class “label-info لتعيين لون label إلى “أزرق” (السطر 11).

يمكن تغيير حجم ” labels” باستخدام علامات “element ” (على سبيل المثال “h3” في السطر 11) خارج علامة “span” (السطر 11).

ملاحظة: يوفر Bootstrap   , خيارات ألوان(danger, default, info, primary, success, warning)

<!DOCTYPE html>
 <html>
 <head>
 <title>Bootstrap Tutorial</title>
 <!-- CSS -->
 <link href="asset/css/bootstrap.min.css" rel="stylesheet">
 <!-- Add Custom CSS below -->
 </head>

 <body>
 <h3>Lable example  <span class="label label-info">New</span></h3>
 <hr>

 <!-- Javascript -->
 <!-- put jQuery.js before bootstrap.min.js; and then add custom jquery -->
 <script src="asset/js/jquery-3.3.1.min.js"></script>
 <script src="asset/js/bootstrap.min.js"></script>
 </body>
 </html>

صفحة html المقابلة للكود أعلاه

ملاحظة: أرجو استخدام الكود السابق وسيتم إضافة الكود الجديد في علامة ‘body’. لذلك لا يتم إضافة كود HTML الكامل في الأكواد الأتية.

Buttons

يمكن استخدام عنصر “button” لإنشاء الزر في Bootstrap كما هو موضح أدناه ،

ملاحظة: يمكننا استخدام “lg” و “md” و “xs” وما إلى ذلك لتعيين حجم الزر. في السطر 3 ، تمت إضافة رمز رسومي (مثال  علامة سلة المهملات). يمكن العثور على المزيد من الرموز الرسومية على صفحة ويب Bootstrap.

<h3> Buttons </h3>
<button type="button" class="btn btn-primary">Sign in</button>
<button type="button" class="btn btn-danger"> Delete <span class="glyphicon glyphicon-trash"><span></
button>
<button type="submit" class="btn btn-lg btn-success">Submit</button>
<button type="submit" class="btn btn-md btn-success">Submit</button>
<button type="submit" class="btn btn-sm btn-success">Submit</button>

صفحة html المقابلة للكود أعلاه

Forms

في هذا القسم، تمت إضافة العديد من أنواع النماذج،

Basic form

<h2> Basic form </h2>
<div class="row">
<div class="col-sm-5" style="background: pink">
<div class="panel-body">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password
">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input id="exampleInputFile" type="file">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-info">Submit</button>
</form>
</div>
</div>
</div>
<br><br>

صفحة html المقابلة للكود أعلاه

Bootstrap

Horizontal form

<h3> Horizontal form </h3>
<div class="row">
<div class="col-sm-5" style="background: pink">
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-lg-2 col-sm-2 control-label">Email</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail1" placeholder="Email" type="email">
<p class="help-block">Example block-level help text here.</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-lg-2 col-sm-2 control-label">Password</label>
<div class="col-lg-10">
<input class="form-control" id="inputPassword1" placeholder="Password" type="password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-danger">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>

صفحة html المقابلة للكود أعلاه

Bootstrap

Inline form

<h2> Inline form </h2>
<div class="row">
<div class="col-sm-5" style="background: pink">
<div class="panel-body">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input class="form-control" id="exampleInputEmail2" placeholder="Enter email" type="email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input class="form-control" id="exampleInputPassword2" placeholder="Password" type="password
">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
</div>
</div>
<br><br>

صفحة html المقابلة للكود أعلاه

Modal form

Modal form يظهر في النافذة المنبثقة

<!-- model form -->
<h3> Modal form </h3>
<div class="row">
<div class="col-sm-5" style="background: pink">
<div class="panel-body">
<!-- button to generate model form -->
<a href="#myModal" data-toggle="modal" class="btn btn-xs btn-success">
Form in Modal
</a>
<!-- model form settings -->
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal"␣
class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</
button>
<h4 class="modal-title">Form Tittle</h4>
</div>
<div class="modal-body">
<!-- actual form -->
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail3" placeholder="Enter email
" type="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword3" placeholder="Password
" type="password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input id="exampleInputFile3" type="file">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!-- actual form ends -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>

صفحة html المقابلة للكود أعلاه

Form elements

<!-- Form elements -->
<h3> Form elements </h3>
<div class="row">
<div class="col-sm-5" style="background: pink">
<div class="panel-body">
<form class="form-horizontal tasi-form" method="get">
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Default</label>
<div class="col-sm-10">
<input class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Help text</label>
<div class="col-sm-10">
<input class="form-control" type="text">
<span class="help-block">A block of help text that breaks onto a new line and may␣
extend beyond one line.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Rounder</label>
<div class="col-sm-10">
<input class="form-control round-input" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Input focus</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" value="This is focused..." type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Disabled</label>
<div class="col-sm-10">
<input class="form-control" id="disabledInput" placeholder="Disabled input here..."
disabled="disabled" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Placeholder</label>
<div class="col-sm-10">
<input class="form-control" placeholder="placeholder" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input class="form-control" placeholder="" type="password">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Static control</label>
<div class="col-lg-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
</form>
</div>
</div>
</div>

صفحة html المقابلة للكود أعلاه

Control size

<!-- Control size -->
<h3>Control size</h3>
<div class="row">
<div class="col-sm-5" style="background: pink">
<div class="panel-body">
<form class="form-horizontal tasi-form" method="get">
<div class="form-group">
<label class="col-sm-2 control-label col-lg-2" for="inputSuccess">Control sizing</label>
<div class="col-lg-10">
<input class="form-control input-lg m-bot15" placeholder=".input-lg" type="text">
<input class="form-control m-bot15" placeholder="Default input" type="text">
<input class="form-control input-sm m-bot15" placeholder=".input-sm" type="text">
<select class="form-control input-lg m-bot15">
<option selected="selected">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="form-control m-bot15">
<option selected="selected">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="form-control input-sm m-bot15">
<option selected="selected">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
</form>
</div>
</div>
</div>

More buttons

<h3>Buttons</h3>
<div class="row">
<div class="col-sm-12" style="background: pink">
<div class="panel-body">
<form class="form-horizontal tasi-form" method="get">
<div class="form-group">
<label class="col-sm-2 control-label col-lg-2" for="inputSuccess">Checkboxes and
radios</label>
<div class="col-lg-10">
<div class="checkbox">
<label>
<input value="" type="checkbox">
Option one is this and thatÐbe sure to include why it's great
</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">
Option one is this and thatÐbe sure to include why it's great option one
</label>
</div>
<div class="radio">
<label>
<input name="optionsRadios" id="optionsRadios1" value="option1" checked=
"checked" type="radio">
Option one is this and thatÐbe sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input name="optionsRadios" id="optionsRadios2" value="option2" type=
"radio">
Option two can be something else and selecting it will deselect option
one
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label col-lg-2" for="inputSuccess">Inline checkboxes</
label>
<div class="col-lg-10">
<label class="checkbox-inline">
<input id="inlineCheckbox1" value="option1" type="checkbox"> 1
</label>
<label class="checkbox-inline">
<input id="inlineCheckbox2" value="option2" type="checkbox"> 2
</label>
<label class="checkbox-inline">
<input id="inlineCheckbox3" value="option3" type="checkbox"> 3
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label col-lg-2" for="inputSuccess">Selects</label>
<div class="col-lg-10">
<select id="select-dropdown-num" class="form-control m-bot15">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select multiple="multiple" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label col-lg-2" for="inputSuccess">Column sizing</
label>
<div class="col-lg-10">
<div class="row">
<div class="col-lg-2">
<input class="form-control" placeholder=".col-lg-2" type="text">
</div>
<div class="col-lg-3">
<input class="form-control" placeholder=".col-lg-3" type="text">
</div>
<div class="col-lg-4">
<input class="form-control" placeholder=".col-lg-4" type="text">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Bootstrap

Input group

<!-- Input groups -->
<h3>Input groups</h3>
<div class="row">
<div class="col-sm-12" style="background: pink">
<div class="panel-body">
<form class="form-horizontal tasi-form" method="get">
<div class="form-group">
<label class="col-sm-2 control-label col-lg-2">Basic examples</label>
<div class="col-lg-10">
<div class="input-group m-bot15">
<span class="input-group-addon">@</span>
<input class="form-control" placeholder="Username" type="text">
</div>
<div class="input-group m-bot15">
<input class="form-control" type="text">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group m-bot15">
<span class="input-group-addon">$</span>
<input class="form-control" type="text">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label col-lg-2">Sizing</label>
<div class="col-lg-10">
<div class="input-group input-group-lg m-bot15">
<span class="input-group-addon">@</span>
<input class="form-control input-lg" placeholder="Username" type="text">
</div>
<div class="input-group m-bot15">
<span class="input-group-addon">@</span>
<input class="form-control" placeholder="Username" type="text">
</div>
<div class="input-group input-group-sm m-bot15">
<span class="input-group-addon">@</span>
<input class="form-control" placeholder="Username" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label col-lg-2">Checkboxe and radio</label>
<div class="col-lg-10">
<div class="input-group m-bot15">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input class="form-control" type="text">
</div>
<div class="input-group m-bot15">
<span class="input-group-addon">
<input type="radio">
</span>
<input class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label col-lg-2">Button addons</label>
<div class="col-lg-10">
<div class="input-group m-bot15">
<span class="input-group-btn">
<button class="btn btn-white" type="button">Go!</button>
</span>
<input class="form-control" type="text">
</div>
<div class="input-group m-bot15">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-white" type="button">Go!</button>
</span>
</div>
<div class="input-group m-bot15">
<div class="input-group-btn">
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown
">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input class="form-control" type="text">
</div>
<div class="input-group m-bot15">
<input class="form-control" type="text">
<div class="input-group-btn">
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown
">Action <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label col-lg-2">Segmented buttons</label>
<div class="col-lg-10">
<div class="input-group m-bot15">
<div class="input-group-btn">
<button tabindex="-1" class="btn btn-white" type="button">Action</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-white dropdown-toggle
" type="button">
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input class="form-control" type="text">
</div>
<div class="input-group m-bot15">
<input class="form-control" type="text">
<div class="input-group-btn">
<button tabindex="-1" class="btn btn-white" type="button">Action</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-white dropdown-toggle
" type="button">
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

Navigation bar (navbar)

بالنسبة إلى شريط التنقل ، تتم إضافة ملف “css” آخر في السطر 8. سيُنشئ CSS مساحة في الجزء العلوي لـ “شريط التنقل” بحيث لن يتداخل مع محتويات صفحة HTML. علاوة على ذلك ، تضيف السطور 13 – 44 روابط مختلفة إلى شريط التنقل. أخيرًا ، يمكننا إضافة محتوى HTML أسفل السطر 46.

<!DOCTYPE html>
 <html>
 <head>
<title>Bootstrap Tutorial</title>
 <!-- CSS -->
 <link href="asset/css/bootstrap.min.css" rel="stylesheet">
 <!-- Add Custom CSS below -->
 <link href="asset/css/theme.css" rel="stylesheet"> <!-- make space at the top for nav - bar -->
 </head>

 <body>

 <div class="navbar navbar-inverse navbar-fixed-top">
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-
collapse">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand hidden-sm" href="http://pythondsp.readthedocs.io/">PythonDSP</a>
 </div>
 <div class="row">
 <div class="navbar-collapse collapse">
 <ul class="nav navbar-nav">

 <li><a href="basic.html">HTML</a></li>
 <li><a href="css.html">CSS</a></li>


 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>
 <ul class="dropdown-menu">
 <li><a href="bootstrap.html">Bootstrap</a></li>
 <li><a href="js.html">Javascript</a></li>
 <li><a href="jquery.html">jQuery</a></li>
 </ul>
 </li>

 </ul>
 </div>
 </div><!-- /.nav - collapse -->
 </div>
 </div>

 <!-- other codes here -->

 <!-- Javascript -->
 <!-- put jQuery.js before bootstrap.min.js; and then add custom jquery -->
 <script src="asset/js/jquery-3.3.1.min.js"></script>
 <script src="asset/js/bootstrap.min.js"></script>
 </body>
 </html>
Bootstrap

في هذا المقال تم الشرح عن Bootstrap و كيفيت تنصيبة و التأكد من صحة التنصيب و تم طرح أمثلة على كل من  Grid system و Components ( Labels, Buttons, Forms, Input, navbar).

منشور ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة