أمثلة على البدء السريع

هل تحتاج إلى بعض القوالب السريعة؟ تحقق من هذه الأمثلة الأساسية التي جمعناها معًا:

الشبكة الافتراضية

نظام الشبكة الافتراضي المقدم كجزء من Bootstrap هو شبكة ذات 16 عمودًا بعرض 940 بكسل. إنها نكهة لنظام الشبكة 960 الشهير ، ولكن بدون هامش / حشوة إضافية على الجانبين الأيسر والأيمن.

مثال على ترميز الشبكة

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

<div class = "row" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

أعمدة التعشيش

تداخل المحتوى الخاص بك إذا كان يجب عليك إنشاء .rowعمود داخل عمود موجود.

مثال على الأعمدة المتداخلة

<div class = "row" > 
  <div class = "span12" > 
    المستوى 1 من العمود
    <div class = "row" > 
      <div class = "span6" > 
        المستوي 2
      </div>
      <div class = "span6" > 
        المستوي 2
      </div>
    </div>
  </div>
</div>

لفة الشبكة الخاصة بك

يوجد في Bootstrap عدد قليل من المتغيرات لتخصيص نظام الشبكة الافتراضي 940 بكسل. مع القليل من التخصيص ، يمكنك تعديل حجم الأعمدة ومزاريبها والحاوية التي يقيمون فيها.

داخل الشبكة

المتغيرات اللازمة لتعديل نظام الشبكة كلها موجودة حاليًا في preboot.less.

الآن للتخصيص

يعني تعديل الشبكة تغيير @grid-*المتغيرات الثلاثة وإعادة تجميع الملفات الأقل.

يأتي Bootstrap مجهزًا للتعامل مع نظام شبكي يصل إلى 24 عمودًا ؛ الافتراضي هو 16. إليك كيف ستبدو متغيرات الشبكة الخاصة بك مخصصة لشبكة مكونة من 24 عمودًا.

gridColumns : 24 ؛       
عرضgridColumnWidth : 20 بكسل ؛   
gridGutterWidth : 20 بكسل ؛   

بمجرد إعادة تجميعها ، سيتم تعيينك!

تخطيط ثابت

التصميم الافتراضي والبسيط الذي يبلغ عرضه 940 بكسل والمتمركز في أي موقع ويب أو صفحة يتم توفيرها بواسطة شخص واحد <div.container>.

<الجسم>
  <div class = "container" > 
    ...
  </div>
</body>

تخطيط مرن

بنية صفحة مرنة بديلة ومرنة ذات عرضين أدنى وأقصى وشريط جانبي يسار. عظيم للتطبيقات والمستندات.

<الجسم>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

العناوين والنسخ

تسلسل هرمي مطبعي قياسي لهيكلة صفحات الويب الخاصة بك.

تعتمد الشبكة المطبعية بأكملها على متغيرين أقل في ملف preboot.less الخاص بنا: @basefontو @baseline. الأول هو حجم الخط الأساسي المستخدم طوال الوقت والثاني هو ارتفاع الخط الأساسي.

نحن نستخدم هذه المتغيرات ، وبعض الرياضيات ، لإنشاء الهوامش ، والحشوات ، وارتفاعات الخطوط لكل أنواعنا وأكثر.

h1. عنوان 1

h2. العنوان 2

h3. العنوان 3

h4. العنوان 4

h5. العنوان 5

h6. العنوان 6

فقرة مثال

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes، nascetur ridiculus mus. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.

عنوان مثال له عنوان فرعي ...

متفرقات عناصر

استخدام التركيز والعناوين والمختصرات

<strong> <em> <address> <abbr>

متى يجب استخدام

يجب استخدام علامات التأكيد ( <strong>و <em>) للإشارة إلى أهمية أو تأكيد إضافي لكلمة أو عبارة تتعلق بالنسخة المحيطة بها. استخدم <strong>للأهمية وللتركيز <em>على التوتر .

التأكيد في فقرة

Fusce dapibus ، tellus ac cursus COMMODO ، tortor mauris condimentum nibh ، ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero ، augue pharetra.

ملاحظة: لا يزال من المقبول استخدام العلامات في HTML5 <b>وليس <i>من الضروري تنسيقها بخط غامق ومائل ، على التوالي (على الرغم من وجود عنصر دلالي أكثر ، فاستخدمه). <b>يُقصد به إبراز الكلمات أو العبارات دون نقل أهمية إضافية ، بينما <i>هو في الغالب للصوت ، والمصطلحات الفنية ، وما إلى ذلك.

عناوين

يتم <address>استخدام العنصر للحصول على معلومات الاتصال لأقرب سلف ، أو مجموعة العمل بأكملها. فيما يلي مثالان على كيفية استخدامها:

ملاحظة:<address> يجب أن ينتهي كل سطر في سطر بفاصل سطر ( <br />) أو يتم لفه بعلامة على مستوى الكتلة (على سبيل المثال ، <p>) لتنظيم المحتوى بشكل صحيح.

الاختصارات

بالنسبة للاختصارات والمختصرات ، استخدم <abbr>العلامة ( <acronym>تم إهمالها في HTML5 ). ضع نموذج الاختصار داخل العلامة وحدد عنوانًا للاسم الكامل.

كتلة الاقتباس

<blockquote> <p> <small>

كيف اقتبس

لتضمين blockquote ، قم <blockquote>بالالتفاف <p>والعلامات <small>. استخدم <small>العنصر للإشارة إلى مصدرك وستحصل على شرطة em —قبله.

Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح من نقاط البيع السابقة.

الدكتور جوليوس هيبرت

<blockquote>
  <p> Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح من نقاط البيع السابقة. </p>
  <small> دكتور جوليوس هيبرت </ small>
</blockquote>

غير مرتب<ul>

• أبجد هوز دولور الجلوس امات
• Consectetur adipiscing النخبة
• عدد صحيح molestie lorem في ماسا
• Facilisis في فترة ما قبل nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • الدهليز laoreet porttitor sem
  • AC tristique Libero volutpat أت
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

غير منمق<ul.unstyled>

• أبجد هوز دولور الجلوس امات
• Consectetur adipiscing النخبة
• عدد صحيح molestie lorem في ماسا
• Facilisis في فترة ما قبل nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • الدهليز laoreet porttitor sem
  • AC tristique Libero volutpat أت
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

أمر<ol>

1. أبجد هوز دولور الجلوس امات
2. Consectetur adipiscing النخبة
3. عدد صحيح molestie lorem في ماسا
4. Facilisis في فترة ما قبل nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

وصفdl

قوائم الوصف

قائمة وصف مثالية لتعريف المصطلحات.

يوسمود

الدهليز معرف ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

شفرة

<code> <pre>

قم بتحسين الكود الخاص بك بأسلوب باستخدام علامتين بسيطتين. لمزيد من الروعة من خلال جافا سكريبت ، قم بإسقاط مكتبة تجميل رمز جوجل وستكون جاهزًا.

تقديم الكود

يمكن عرض الكود أو الكتل أو المقتطفات المضمنة فقط بنمط فقط عن طريق التفاف في العلامة الصحيحة. بالنسبة لكتل ​​التعليمات البرمجية التي تمتد عبر عدة أسطر ، استخدم <pre>العنصر. للحصول على التعليمات البرمجية المضمنة ، استخدم <code>العنصر.

<div>
  <h1> العنوان </ h1>
  <p> شيء ما هنا ... </ p>
</div>

<div> <h1> العنوان </ h1> <p> شيء ما هنا ... </ p> </div>
  
  

تسميات مضمنة

<span class="label">

لفت الانتباه إلى أي عبارة في نصك أو ضع علامة عليها.

تسمية أي شيء

من أي وقت مضى في حاجة واحدة من هؤلاء يتوهم الجديد! أو أعلام مهمة عند كتابة التعليمات البرمجية؟ حسنا ، الآن لديك منهم. إليك ما يتم تضمينه افتراضيًا:

شبكة الوسائط

اعرض صورًا مصغرة بأحجام مختلفة على صفحات ذات بصمة HTML منخفضة وأنماط قليلة.

مثال على الصور المصغرة

يمكن أن تكون الصور المصغرة في .media-gridأي حجم ، لكنها تعمل بشكل أفضل عند تعيينها مباشرة إلى نظام شبكة Bootstrap المدمج. تتحد عروض الصور مثل 90 و 210 و 330 مع عدد قليل من وحدات البكسل من المساحة المتروكة لتساوي أحجام الأعمدة .span2و .span4و ..span6

كبير

متوسط

صغير

ترميزهم

تعد شبكات الوسائط سهلة الاستخدام وبسيطة إلى حد ما على جانب العلامات. أبعادها تعتمد فقط على حجم الصور المدرجة.

<ul class = "media-grid" > 
  <li>
    <a href = "#"> _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#"> _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

طاولات البناء

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

تعتبر الجداول رائعة - للعديد من الأشياء. ومع ذلك ، تحتاج الجداول الرائعة إلى القليل من الترميز لتكون مفيدة وقابلة للتطوير وقابلة للقراءة (على مستوى الكود). فيما يلي بعض النصائح للمساعدة.

قم دائمًا بلف رؤوس الأعمدة في <thead>مثل هذا التسلسل الهرمي <thead>>> .<tr><th>

على غرار رؤوس الأعمدة ، يجب أن يتم تغليف كل محتوى نص الجدول في <tbody>التسلسل الهرمي الخاص بك <tbody>>> .<tr><td>

مثال: أنماط الجدول الافتراضية

سيتم تصميم جميع الجداول تلقائيًا بالحدود الأساسية فقط لضمان سهولة القراءة والحفاظ على الهيكل. لا حاجة لإضافة فئات أو سمات إضافية.

<جدول>
  ...
</table>

مثال: مخطط حمار وحشي

احصل على القليل من الهوى مع طاولاتك عن طريق إضافة مخطط حمار وحشي - فقط أضف .zebra-stripedالفصل.

ملاحظة: Zebra-striping هو تحسين تدريجي غير متاح للمتصفحات القديمة مثل IE8 وما دونه.

<table class = "zebra-striped" > 
...
</table>

مثال: مخطط Zebra-w / TableSorter.js

بأخذ المثال السابق ، نقوم بتحسين فائدة جداولنا من خلال توفير وظائف الفرز عبر jQuery والمكوِّن الإضافي Tablesorter . انقر فوق رأس أي عمود لتغيير الترتيب.

<script src = "js / jquery / jquery.tablesorter.min.js" > </script> 
<البرنامج النصي > 
  $ ( الوظيفة () { 
    $ ( "table # sortTableExample" ). tableorter ({ sortList : [[ 1 ، 0 ]] })؛  
  }) ؛
</script>
<table class = "zebra-striped" > 
  ...
</table>

الأنماط الافتراضية

يتم إعطاء جميع النماذج أنماطًا افتراضية لتقديمها بطريقة قابلة للقراءة وقابلة للقياس. يتم توفير أنماط لإدخالات النص ، وتحديد القوائم ، ومناطق النص ، وأزرار الاختيار ومربعات الاختيار ، والأزرار.

أشكال مكدسة

أضف .form-stackedإلى HTML الخاص بالنموذج وستحصل على تسميات أعلى الحقول بدلاً من يسارها. يعمل هذا بشكل رائع إذا كانت النماذج الخاصة بك قصيرة أو لديك عمودين من المدخلات للنماذج الثقيلة.

أحجام حقول النموذج

قم بتخصيص أي نموذج أو inputعرض عن طريق إضافة فئات قليلة فقط إلى الترميز الخاص بك.selecttextarea

اعتبارًا من الإصدار 1.3.0 ، أضفنا فئات تغيير الحجم على أساس الشبكة لعناصر النموذج. الرجاء استخدام هذه فوق الفئات الموجودة ، وما إلى ذلك .mini..small

أزرار

كمصطلح ، يتم استخدام الأزرار للإجراءات بينما يتم استخدام الروابط للكائنات. على سبيل المثال ، يمكن أن يكون "تنزيل" زرًا ويمكن أن يكون "النشاط الأخير" رابطًا.

يتم تعيين جميع الأزرار افتراضيًا على نمط رمادي فاتح ، ولكن يمكن تطبيق عدد من الفئات الوظيفية لأنماط ألوان مختلفة. تشتمل هذه الفئات على فئة زرقاء .primary، وفئة زرقاء فاتحة .info، وفئة خضراء .success، وفئة حمراء .danger.

أزرار المثال

يمكن تطبيق أنماط الأزرار على أي شيء .btnمطبق عليه. عادة سترغب في تطبيق هذه العناصر فقط على <a>، <button>واختيار <input>. إليك كيف تبدو:

مقاسات بديلة

يتوهم أزرار أكبر أو أصغر؟ هل لديك في ذلك!

دولة المعوقين

بالنسبة للأزرار غير النشطة أو التي تم تعطيلها بواسطة التطبيق لسبب أو لآخر ، استخدم حالة التعطيل. هذا .disabledللروابط :disabledوالعناصر <button>.

الروابط

أزرار

ما هذا

شريطنا العلوي عبارة عن شريط ثابت يحتوي على شعار أو اسم موقع ويب والتنقل الأساسي ونموذج البحث.

قابل للتخصيص

جميع العناصر الموجودة بالداخل والشريط العلوي بأكمله اختيارية أيضًا. يمكنك اختيار تضمين شعار / اسم ، والتنقل ، والبحث ، والتنقل الثانوي - أو أي مزيج من ذلك.

وشملت القوائم المنسدلة

كجزء من التنقل الرئيسي ، قمنا بتضمين القدرة على إضافة قوائم منسدلة إلى التنقل الخاص بك. تحقق من التنقل الثانوي أعلاه (المحاذاة إلى اليمين) لترى كيف يتم ذلك. liتدعم علامات القوائم المنسدلة أيضًا .activeإظهار تحديد الصفحة الحالية.

أقراص وحبوب

قم بإنشاء تنقل ثانوي بسيط باستخدام ملف <ul>. قم بالتبديل بين علامات التبويب أو الأقراص عن طريق إضافة الفئة المناسبة.

رائعة للأقسام الفرعية للمحتوى مثل صفحات إعدادات الحساب والجداول الزمنية للمستخدم للتبديل بين الصفحات ذات المحتوى المتشابه. متوفر في أنماط مبوبة أو حبوب.

• مسكن
• الملف الشخصي
• رسائل
• إعدادات
• اتصال
• اسقاط
  • رابط ثانوي
  • شيء آخر هنا
  • رابط آخر

<ul class = "tabs" > 
  <li class = "active" > <a href = "#"> الصفحة الرئيسية </a> </li>  
  <li> <a href = "#"> الملف الشخصي </a> < /li> 
  <li> <a href = "#"> الرسائل </a> < /li> 
  <li> <a href = "#"> الإعدادات </a> < /li> 
  <li> <a href = "#"> جهة اتصال </a> < /li> 
</ul>

• مسكن
• الملف الشخصي
• رسائل
• إعدادات
• اتصال

<ul class = "pills" > 
  <li class = "active" > <a href = "#"> الصفحة الرئيسية </a> </li>  
  <li> <a href = "#"> الملف الشخصي </a> < /li> 
  <li> <a href = "#"> الرسائل </a> < /li> 
  <li> <a href = "#"> الإعدادات </a> < /li> 
  <li> <a href = "#"> جهة اتصال </a> < /li> 
</ul>

فتات الخبز

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

• مسكن

• الرئيسية /
• الصفحة الوسطى

• الرئيسية /
• الصفحة الوسطى /
• واحدة أخرى

• الرئيسية /
• الصفحة الوسطى /
• واحد اخر /
• أنت هنا

<ul class = "breadcrumb" > 
  <li> <a href = "#"> الصفحة الرئيسية </a> <span class = "divider" > / </span> </li>   
  <li> <a href = "#"> الصفحة الوسطى </a> <span class = "divider" > / </span> </li>   
  <li> <a href = "#"> آخر </a> < span class = "divider" > / </span> </li>   
  <li class = "active" > أنت هنا </ li> 
</ul>

ترقيم الصفحات

ترقيم الصفحات شديد التبسيط وذو تصميم بسيط مستوحى من Rdio. من الصعب تفويت الكتلة الكبيرة ، وقابلة للتطوير بسهولة ، وتوفر مساحات كبيرة للنقر.

<div class = "pagination" > 
  <ul>
    <li class = "prev تعطيل" > <a href = "#"> & larr؛ السابق </a> </li>  
    <li class = "active" > <a href = "#"> 1 </a> < /li>  
    <li> <a href = "#"> 2 </a> < /li> 
    <li> <a href = "#"> 3 </a> < /li> 
    <li> <a href = "#"> 4 </a> < /li> 
    <li> <a href = "#"> 5 </a> < /li> 
    <li class = "next" > <a href = "#"> التالي & rarr؛ </a> </li>  
  </ul>
</div>

تنبيهات أساسية

.alert-message

رسائل من سطر واحد لإبراز الفشل أو الفشل المحتمل أو نجاح إجراء ما. مفيد بشكل خاص للنماذج.

احصل على جافا سكريبت »

مثال على الكود

<div class = "alert-message warning" > 
  <a class = "close" href = "#"> × </a> _  
  <p> <strong> حساء الجواكامولي المقدس! </strong> أفضل التحقق من نفسك ، أنت لا تبدو جيدة للغاية. </p>
</div>

حظر الرسائل

.alert-message.block-message

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

احصل على جافا سكريبت »

مثال على الكود

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#"> × </a> _  
  <p> <strong> حساء الجواكامولي المقدس! هذا تحذير! </strong> أفضل التحقق من نفسك ، أنت لا تبدو جيدة للغاية. Nulla vitae elit libero ، augue pharetra. عرض سلعة كبيرة ، في scelerisque nisl consectetur et. </p>
  <div class = "alert-Actions" > 
    <a class = "btn small" href = "#"> نفّذ هذا الإجراء </a> <a class = "btn small" href = "#"> أو افعل هذا </a>     
  </div>
</div>

وسائط

تعد الوسائط - مربعات الحوار أو الصناديق المبسطة - رائعة بالنسبة للإجراءات السياقية في المواقف التي يكون فيها من المهم الحفاظ على سياق الخلفية.

احصل على جافا سكريبت »

تلميحات

تعد Twipsies مفيدة للغاية لمساعدة المستخدم المرتبك وتوجيهه في الاتجاه الصحيح.

احصل على جافا سكريبت »

بوبوفرز

استخدم العناصر المنبثقة لتوفير معلومات نصية للصفحة دون التأثير على التخطيط.

احصل على جافا سكريبت »

ابدء

يعد دمج جافا سكريبت مع مكتبة Bootstrap أمرًا سهلاً للغاية. فيما يلي نتعرف على الأساسيات ونزودك ببعض المكونات الإضافية الرائعة لتبدأ!

عرض مستندات جافا سكريبت »

ما يحتويه

قم بإضفاء الحيوية على بعض مكونات Bootstrap الأساسية باستخدام المكونات الإضافية المخصصة الجديدة التي تعمل مع jQuery و Ender . نحن نشجعك على تمديدها وتعديلها لتناسب احتياجات التطوير الخاصة بك.

هل جافا سكريبت ضروري؟

لا! تم تصميم Bootstrap أولاً وقبل كل شيء ليكون مكتبة CSS. يوفر جافا سكريبت هذا طبقة تفاعلية أساسية أعلى الأنماط المضمنة.

ومع ذلك ، بالنسبة لأولئك الذين يحتاجون إلى جافا سكريبت ، قمنا بتوفير المكونات الإضافية أعلاه لمساعدتك على فهم كيفية دمج Bootstrap مع جافا سكريبت ولإعطائك خيارًا سريعًا وخفيف الوزن للوظائف الأساسية على الفور.

لمزيد من المعلومات ولرؤية بعض العروض التوضيحية الحية ، يرجى الرجوع إلى صفحة توثيق البرنامج المساعد .