دليل مختصر Bootstrap مع عرض كبير في عيد الأضحى

bootstrap 的学习非常简单，并且它所提供的样式又非常精美。只要稍微简单的学习就可以制作出漂亮的页面。

bootstrap中文网：http://v3.bootcss.com/　　　

bootstrap提供了三种类型的下载：　

用于生产环境的 Bootstrap

编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。　

Bootstrap 源码
Less、JavaScript 和字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作。　

Sass
这是 Bootstrap 从 Less 到 Sass 的源码移植项目，用于快速地在 Rails、Compass 或只针对 Sass 的项目中引入。　

其实我们不用下载bootstrap也可以使用它：　

Bootstrap 中文网为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。　

base.html

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- يجب أن تكون هذه 3 علامات meta *مطلوبة* في أولاً، وكل محتوى آخر يجب أن يتبعه! -->
  <title>نموذج قالب Bootstrap 101</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
 </head>
 <body>
  <h1>مرحبًا، بوتستب！</h1>
  <!-- jQuery (مطلوب لـ مكونات JavaScript لـ Bootstrap) -->
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  <!-- تضمين جميع المكونات المدمجة (أسفل)، أو تضمين ملفات فرعية حسب الحاجة -->
  <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </body>
</html>

تم تحميل بوتستب في ملف base.html، احفظة، يمكننا استخدام الأنماط التي يقدمها بوتستب.

الرموز النصية　

يقدم بوتستب بئرز أكثر من مئتين رمزًا. يمكننا استخدام هذه الرموز من خلال استخدام علامة <span>:　

<h3>الشعار</h3>  
  <span class="glyphicon glyphicon-home"></span>
  <span class="glyphicon glyphicon-signal"></span>
  <span class="glyphicon glyphicon-cog"></span>
  <span class="glyphicon glyphicon-apple"></span>
  <span class="glyphicon glyphicon-trash"></span>
  <span class="glyphicon glyphicon-play-circle"></span>
  <span class="glyphicon glyphicon-headphones"></span>

الزر

استخدام <button></button> لإنشاء زر، يقدم بوتستربايت أنماط زر غنية.
  <h3>الزر</h3>
  <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>
  <h3>حجم الزر</h3>
  <button type="button" class="btn btn-default">الزر</button>
  <button type="button" class="btn btn-primary btn-lg">الأساسي</button>
  <button type="button" class="btn btn-success btn-sm">النجاح</button>
  <button type="button" class="btn btn-info btn-xs">المعلومات</button>
  <h3>الرمز المعروض في الزر</h3>
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span>  زر</button>

بالإضافة إلى الأحجام الافتراضية للزر، يقدم بوتستريك ثلاثة معلمات لضبط حجم الزر، وهي: btn-lg،btn-sm وbtn-xs.　

قائمة التنقل

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

<h3>قائمة التنقل</h3>
  <div class="dropdown">
   <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    التنقل下拉
    <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">فعل</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">فعل آخر</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">شيء آخر هنا</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">رابط منفصل</a></li>
   </ul>
  </div>

حقل النص

لإنشاء حقل النص باستخدام علامة <input></input>.　

  <h3>حقل النص</h3>
  <div class="input-group">
   <span class="glyphicon glyphicon-user"></span>
   <input type="text" placeholder="اسم المستخدم">
  </div>
  <div class="input-group">
   <span class="glyphicon glyphicon-lock"></span>
   <input type="password" placeholder="password">
  </div>

شريط التوجيه

شريط التوجيه لا غنى عنه كدليل لكل موقع الويب.　

<h3>شريط التوجيه</h3>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div id="navbar" class="navbar-collapse collapse">
     <ul class="nav navbar-nav">
      <li class="active"><a href="#">الصفحة الرئيسية</a></li>
      <li><a href="#about">عن</a></li>
      <li><a href="#contact">اتصل بنا</a></li>
      <li class="dropdown">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">التنقل <span class="caret"></span></a>
       <ul class="dropdown-menu" role="menu">
        <li><a href="#">عمل</a></li>
        <li><a href="#">عمل آخر</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">عنوان القائمة</li>
        <li><a href="#">رابط منفصل</a></li>
       </ul>
      </li>
     </ul>
    </div><!--/.nav-collapse -->
   </div>
  </nav>

النموذج

البيانات التي تتبادل بين الإنسان والنظام يجب أن يتم نقلها من خلال النموذج. مثل تقديم معلومات التسجيل/ال登입، تقديم الشروط البحثية، إلخ. يتم إنشاء النموذج باستخدام علامات <form></form>.　

  <h3>表单</h3>
  <form>
  <div class="form-group">
   <span class="glyphicon glyphicon-user"></span>
   <input type="email" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
   <span class="glyphicon glyphicon-lock"></span>
   <input type="password" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
   <label for="exampleInputFile">File input</label>
   <input type="file" id="exampleInputFile">
   <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>

التنبيهات

التنبيهات هي وسيلة مهمة لتحقيق التواصل بين النظام وال مستخدم وتقديم الإرشادات. لا يوجد علامة مخصصة للتنبيهات، يمكن أن يتم إنشاء تنبيهات جميلة باستخدام النمط المقدم من Bootstrap.

<h3>警告框</h3>
  <div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
  </div>
  <div class="alert alert-success" role="alert">
    <a href="#" class="alert-link">success!</a>
  </div>
  <div class="alert alert-info" role="alert">
    <a href="#" class="alert-link">info!</a>
  </div>
  <div class="alert alert-warning" role="alert">
    <a href="#" class="alert-link">تحذير!</a>
  </div>
  <div class="alert alert-danger" role="alert">
    <a href="#" class="alert-link">خطيرة!</a>
  </div>

شريط التقدم

عادة ما يتطلب عملية معالجة النظام من المستخدمين الانتظار، يمكن لشريط التقدم أن يسمح للمستخدمين بتقدير عملية معالجة النظام، مما يزيد من مقدار التسامح.　

  <h3>شريط التقدم</h3>
  <div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    70%
   </div>
  </div>

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون قد ساعدكم في التعلم، ونأمل أيضًا أن تدعموا دليل التعليمات.

إذا أردتم التعمق أكثر في التعلم، يمكنكم الضغط هنا للتعلم، وسيتم تزويدكم بثلاثة مواضيع رائعة: دليل تعلم Bootstrap دليل تطبيق Bootstrap

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ملكية المادة للمراجع، تم إضافة المحتوى من قبل مستخدمي الإنترنت بذاتهم، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتوى بشكل إنساني، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا اكتشفت محتوى يشتبه في انتهاك حقوق النسخ، فمرحبًا بك في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@') لإبلاغنا، وقدم الأدلة ذات الصلة، وسيتم حذف المحتوى المزعوم عن انتهاك حقوق النسخ على الفور.

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

سيكون لديك اهتمام