Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus، porta ac consectetur ac، vestibulum at eros.
Bootstrap عبارة عن مجموعة أدوات من Twitter مصممة لبدء تطوير تطبيقات الويب والمواقع.
يتضمن CSS و HTML أساسيين للطباعة والنماذج والأزرار والجداول والشبكات والتنقل والمزيد.
تنبيه الطالب الذي يذاكر كثيرا: تم تصميم Bootstrap باستخدام Less وتم تصميمه للعمل خارج البوابة مع وضع المتصفحات الحديثة في الاعتبار.
للحصول على أسرع وأسهل بداية ، ما عليك سوى نسخ هذا المقتطف إلى صفحة الويب الخاصة بك.
من محبي استخدام أقل؟ لا مشكلة ، ما عليك سوى استنساخ الريبو وإضافة هذه الأسطر:
قم بتنزيل ، fork ، pull ، ملف المشكلات ، والمزيد باستخدام Bootstrap repo الرسمي على Github.
في الأيام الأولى لتويتر ، استخدم المهندسون تقريبًا أي مكتبة كانوا على دراية بها لتلبية متطلبات الواجهة الأمامية. بدأ Bootstrap كإجابة على التحديات التي طرحت وسرعان ما تسارع التطور خلال أول Hackweek على تويتر.
بمساعدة وتعليقات العديد من المهندسين في Twitter ، نما Bootstrap بشكل كبير ليشمل ليس فقط الأنماط الأساسية ، ولكن أنماط تصميم الواجهة الأمامية الأكثر أناقة ودائمة.
اقرأ المزيد على dev.twitter.com ›
تم اختبار Bootstrap ودعمه في المتصفحات الحديثة الرئيسية مثل Chrome و Safari و Internet Explorer و Firefox.
يأتي Bootstrap كاملاً مع قوالب CSS مجمعة وقوالب غير مجمعة ونماذج.
نظام الشبكة الافتراضي المقدم كجزء من Bootstrap هو شبكة ذات 16 عمودًا بعرض 940 بكسل. إنها نكهة لنظام الشبكة 960 الشهير ، ولكن بدون هامش / حشوة إضافية على الجانبين الأيسر والأيمن.
كما هو موضح هنا ، يمكن إنشاء تخطيط أساسي باستخدام "عمودين" ، يمتد كل منهما على عدد من الأعمدة الستة عشر التأسيسية التي حددناها كجزء من نظام الشبكة الخاص بنا. انظر الأمثلة أدناه لمزيد من الاختلافات.
- <div class = "row">
- <div class = "span6 عمود" >
- ...
- </div>
- <div class = "span10 عمود" >
- ...
- </div>
- </div>
تخطيط حاوية أساسي بعرض 940 بكسل ومركزًا لأي موقع أو صفحة تقريبًا.
- <الجسم>
- <div class = "container" >
- ...
- </div>
- </body>
بنية صفحة سائلة أو سائلة مرنة ذات عرضين أدنى وأقصى وشريط جانبي يسار. عظيم للتطبيقات.
- <الجسم>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </body>
تسلسل هرمي مطبعي قياسي لهيكلة صفحات الويب الخاصة بك.
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. عدد صحيح من نقاط البيع السابقة.
الدكتور جوليوس هيبرت
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
تعتبر الجداول رائعة - للعديد من الأشياء. ومع ذلك ، تحتاج الجداول الرائعة إلى القليل من الترميز لتكون مفيدة وقابلة للتطوير وقابلة للقراءة (على مستوى الكود). فيما يلي بعض النصائح للمساعدة.
قم دائمًا بلف رؤوس الأعمدة في <thead>
مثل هذا التسلسل الهرمي <thead>
>> .<tr>
<th>
على غرار رؤوس الأعمدة ، يجب أن يتم تغليف كل محتوى نص الجدول في <tbody>
التسلسل الهرمي الخاص بك <tbody>
>> .<tr>
<td>
سيتم تصميم جميع الجداول تلقائيًا بالحدود الأساسية فقط لضمان سهولة القراءة والحفاظ على الهيكل. لا حاجة لإضافة فئات أو سمات إضافية.
# | الاسم الاول | الكنية | لغة |
---|---|---|---|
1 | بعض | واحد | إنجليزي |
2 | جو | تقسيمة عضلات البطن | إنجليزي |
3 | ستو | صدمه خفيفه | شفرة |
- <table class = "common-table"> class = "common-table" >
- ...
- </table>
احصل على القليل من الهوى مع طاولاتك عن طريق إضافة مخطط حمار وحشي - فقط أضف .zebra-striped
الفصل.
# | الاسم الاول | الكنية | لغة |
---|---|---|---|
1 | بعض | واحد | إنجليزي |
2 | جو | تقسيمة عضلات البطن | إنجليزي |
3 | ستو | صدمه خفيفه | شفرة |
ملاحظة: Zebra-striping هو تحسين تدريجي غير متاح للمتصفحات القديمة مثل IE8 وما دونه.
- <table class = "common-table zebra-striped"> class = "مخطط حمار وحشي للطاولة المشتركة" >
- ...
- </table>
بأخذ المثال السابق ، نقوم بتحسين فائدة جداولنا من خلال توفير وظائف الفرز عبر jQuery والمكوِّن الإضافي Tablesorter . انقر فوق رأس أي عمود لتغيير الترتيب.
# | الاسم الاول | الكنية | لغة |
---|---|---|---|
1 | لك | واحد | إنجليزي |
2 | جو | تقسيمة عضلات البطن | إنجليزي |
3 | ستو | صدمه خفيفه | شفرة |
- <script src = "js / jquery / jquery.tablesorter.min.js"> </script> src = "js / jquery / jquery.tablesorter.min.js" > </script>
- <البرنامج النصي >
- $ ( الوظيفة () {
- $ ( "table # sortTableExample" ). tableorter ({ sortList : [[ 1 ، 0 ]] })؛
- }) ؛
- </script>
- <table class = "common-table zebra-striped" >
- ...
- </table>
يتم إعطاء جميع النماذج أنماطًا افتراضية لتقديمها بطريقة قابلة للقراءة وقابلة للقياس. يتم توفير أنماط لإدخالات النص ، وتحديد القوائم ، ومناطق النص ، وأزرار الاختيار ومربعات الاختيار ، والأزرار.
أضف .form-stacked
إلى HTML الخاص بالنموذج وستحصل على تسميات أعلى الحقول بدلاً من يسارها. يعمل هذا بشكل رائع إذا كانت النماذج الخاصة بك قصيرة أو لديك عمودين من المدخلات للنماذج الثقيلة.
كمصطلح ، يتم استخدام الأزرار للإجراءات بينما يتم استخدام الروابط للكائنات. على سبيل المثال ، يمكن أن يكون "تنزيل" زرًا ويمكن أن يكون "النشاط الأخير" رابطًا.
يتم تعيين جميع الأزرار بشكل افتراضي على نمط رمادي فاتح ، ولكن .primary
تتوفر فئة زرقاء. بالإضافة إلى ذلك ، فإن دحرجة الأنماط الخاصة بك أمر سهل للغاية.
يمكن تطبيق أنماط الأزرار على أي شيء .btn
مطبق عليه. عادة سترغب في تطبيق هذه العناصر فقط على <a>
، <button>
واختيار <input>
. إليك كيف تبدو:
يتوهم أزرار أكبر أو أصغر؟ هل لديك في ذلك!
بالنسبة للأزرار غير النشطة أو التي تم تعطيلها بواسطة التطبيق لسبب أو لآخر ، استخدم حالة التعطيل. هذا .disabled
للروابط :disabled
والعناصر <button>
.
رسائل من سطر واحد لإبراز الفشل أو الفشل المحتمل أو نجاح إجراء ما. مفيد بشكل خاص للنماذج.
بالنسبة للرسائل التي تتطلب القليل من الشرح ، لدينا تنبيهات نمط الفقرة. هذه مثالية لنشر رسائل خطأ أطول ، وتحذير المستخدم من إجراء معلق ، أو مجرد تقديم معلومات لمزيد من التركيز على الصفحة.
تعد الوسائط - مربعات الحوار أو الصناديق المبسطة - رائعة بالنسبة للإجراءات السياقية في المواقف التي يكون فيها من المهم الحفاظ على سياق الخلفية.
جسد واحد جميل ...
تعد Twipsies مفيدة للغاية لمساعدة المستخدم المرتبك وتوجيهه في الاتجاه الصحيح.
هذا هو الخطأ الذي يحدث في الواقع ، وهذا هو الخطأ الذي يحدث بشكل كبير . Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo، voluptas quia odit fugit accusantium totam totam architectureo explicabo sit is fugit fugit، totam doloremque unde sunt quae quae accusantium fugit voluptas nemo quia voluptate quuptas ver.1.5 .
استخدم العناصر المنبثقة لتوفير معلومات نصية للصفحة دون التأثير على التخطيط.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus، porta ac consectetur ac، vestibulum at eros.
تم تصميم Bootstrap باستخدام Preboot ، وهو عبارة عن حزمة مفتوحة المصدر من المزيجات والمتغيرات لاستخدامها جنبًا إلى جنب مع Less ، وهو معالج CSS أولي لتطوير الويب بشكل أسرع وأسهل.
اكتشف كيف استخدمنا Preboot في Bootstrap وكيف يمكنك الاستفادة منه إذا اخترت تشغيل Less في مشروعك التالي.
استخدم هذا الخيار للاستفادة الكاملة من متغيرات Bootstrap ومزجها وتداخلها في CSS عبر جافا سكريبت في متصفحك.
- <link rel = "stylesheet / less" href = "less / bootstrap.less" media = "all" /> rel = "stylesheet / less" href = "less / bootstrap.less" media = "all" />
- <script src = "js / less-1.0.41.min.js" > </script>
ألا تشعر بحل .js؟ جرب تطبيق Less Mac أو استخدم Node.js للترجمة عند نشر التعليمات البرمجية الخاصة بك.
فيما يلي بعض النقاط البارزة لما يتضمنه Twitter Bootstrap كجزء من Bootstrap. توجه إلى موقع Bootstrap الإلكتروني أو صفحة مشروع Github للتنزيل ومعرفة المزيد.
تعد المتغيرات في Less مثالية للحفاظ على صداع CSS وتحديثه مجانًا. عندما تريد تغيير قيمة لون أو قيمة مستخدمة بشكل متكرر ، قم بتحديثها في مكان واحد وستكون جاهزًا.
- // الروابط
- linkColor : # 8b59c2 ؛
- LinkColorHover : darken ( linkColor ، 10 ) ؛
- // غرايز
- @ أسود : # 000 ؛
- grayDark : تفتيح ( black ، 25 ٪) ؛
- @ gray : تفتيح ( @ أسود ، 50 ٪) ؛
- grayLight : تفتيح ( @ أسود ، 70 ٪) ؛
- grayLighter : تفتيح ( @ أسود ، 90 ٪) ؛
- @ أبيض : #fff ؛
- // ألوان التمييز
- @ أزرق : # 08b5fb ؛
- green : # 46a546 ؛
- @ red : # 9d261d ؛
- yellow : # ffc40d ؛
- @ أورانج : # f89406 ؛
- @ وردي : # c3325f ؛
- @ الأرجواني : # 7a43b6 ؛
- // حدود
- @ baseline : 20 بكسل ؛
يوفر Less أيضًا أسلوبًا آخر للتعليق بالإضافة إلى /* ... */
بناء جملة CSS العادي.
- // هذا تعليق
- / * هذا أيضًا تعليق * /
يتم تضمين Mixins بشكل أساسي أو أجزاء منه لـ CSS ، مما يسمح لك بدمج كتلة من التعليمات البرمجية في واحدة. إنها رائعة لخصائص البائع المسبوقة مثل box-shadow
التدرجات عبر المستعرضات ومجموعات الخطوط والمزيد. يوجد أدناه عينة من الخلطات المضمنة في Bootstrap.
- # خط {
- . Shorthand ( weight : normal ، size : 14px ، lineHeight : 20px ) {
- الخط - الحجم : @ الحجم ؛
- الخط - الوزن : weight ؛
- ارتفاع الخط : lineHeight ؛ _
- }
- . sans - serif ( weight : normal ، size : 14px ، lineHeight : 20px ) {
- الخط - العائلة : "Helvetica Neue" ، Helvetica ، Arial ، sans - serif ؛
- الخط - الحجم : @ الحجم ؛
- الخط - الوزن : weight ؛
- ارتفاع الخط : lineHeight ؛ _
- }
- . serif ( weight : normal ، size : 14px ، lineHeight : 20px ) {
- الخط - العائلة : "Georgia" ، Times New Roman ، Times ، sans - serif ؛
- الخط - الحجم : @ الحجم ؛
- الخط - الوزن : weight ؛
- ارتفاع الخط : lineHeight ؛ _
- }
- . monospace ( weight : normal ، size : 12px ، lineHeight : 20px ) {
- الخط - العائلة : "Monaco" ، Courier New ، monospace ؛
- الخط - الحجم : @ الحجم ؛
- الخط - الوزن : weight ؛
- ارتفاع الخط : lineHeight ؛ _
- }
- }
- #الانحدار {
- . أفقي ( startColor : # 555،endColor: # 333) {
- الخلفية - اللون : endColor ؛
- الخلفية - كرر : كرر - x ؛
- الخلفية - الصورة : - khtml - الانحدار ( خطي ، أعلى اليسار ، أعلى يمين ، من ( startColor ) ، إلى ( endColor )) ؛ // كونكيورر
- الخلفية - الصورة : - moz - الخطي - التدرج ( يسار ، startColor ، endColor ) ؛ // FF 3.6+
- الخلفية - الصورة : - ms - الخطي - الانحدار ( يسار ، startColor ، endColor ) ؛ // IE10
- الخلفية - الصورة : - webkit - التدرج ( خطي ، أعلى اليسار ، أعلى يمين ، لون - توقف ( 0 ٪ ، startColor ) ، لون - توقف ( 100 ٪ ، endColor )) ؛ // Safari 4+ و Chrome 2+
- الخلفية - الصورة : - webkit - الخطي - الانحدار ( يسار ، startColor ، endColor ) ؛ // Safari 5.1+ و Chrome 10+
- الخلفية - الصورة : - o - الخطي - الانحدار ( يسار ، startColor ، endColor ) ؛ // أوبرا 11.10
- - مللي ثانية - عامل التصفية : ٪ ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '٪ d'، endColorstr = '٪ d'، GradientType = 1)" ، startColor ، endColor )؛ // IE8 +
- عامل التصفية : e (٪ ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '٪ d'، endColorstr = '٪ d'، GradientType = 1)" ، startColor ، endColor ))؛ // IE6 & IE7
- الخلفية - الصورة : خطي - الانحدار ( يسار ، startColor ، endColor ) ؛ // لو قياسي
- }
- . عمودي ( startColor : # 555 ،endColor: # 333) {
- الخلفية - اللون : endColor ؛
- الخلفية - كرر : كرر - x ؛
- الخلفية - الصورة : - khtml - الانحدار ( خطي ، أعلى اليسار ، أسفل اليسار ، من ( startColor ) ، إلى ( endColor )) ؛ // كونكيورر
- الخلفية - الصورة : - moz - الخطي - التدرج ( startColor ، endColor ) ؛ // FF 3.6+
- الخلفية - الصورة : - ms - الخطي - الانحدار ( startColor ، endColor ) ؛ // IE10
- الخلفية - الصورة : - مجموعة الويب - التدرج ( خطي ، أعلى يسار ، أسفل يسار ، لون - توقف ( 0 ٪ ، @ لون البداية ) ، لون - توقف ( 100 ٪ ، endColor )) ؛ // Safari 4+ و Chrome 2+
- الخلفية - الصورة : - webkit - الخطي - الانحدار ( startColor ، endColor ) ؛ // Safari 5.1+ و Chrome 10+
- الخلفية - الصورة : - o - الخطي - الانحدار ( startColor ، endColor ) ؛ // أوبرا 11.10
- - مللي ثانية - عامل التصفية : ٪ ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '٪ d'، endColorstr = '٪ d'، GradientType = 0)" ، startColor ، endColor )؛ // IE8 +
- عامل التصفية : e (٪ ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '٪ d'، endColorstr = '٪ d'، GradientType = 0)" ، startColor ، endColor ))؛ // IE6 & IE7
- الخلفية - الصورة : خطي - الانحدار ( startColor ، endColor ) ؛ // المعيار
- }
- . الاتجاه ( startColor : # 555 ،endColor: # 333 ،deg: 45 درجة) {
- ...
- }
- . عمودي - ثلاثة - ألوان ( startColor : # 00b3ee ،midColor: # 7a43b6 ،colorStop: 0.5 ،endColor: # c3325f) {
- ...
- }
- }
كن خياليًا وقم بإجراء بعض الرياضيات لتوليد مزيج مرن وقوي مثل المزيج أدناه.
- // Griditude
- gridColumns : 16 ؛
- gridColumnWidth : 40 بكسل ؛
- gridGutterWidth : 20 بكسل ؛
- // نظام الشبكة
- . حاوية {
- العرض : siteWidth ؛
- الهامش : 0 تلقائي ؛
- . clearfix () ؛
- }
- . أعمدة ( columnSpan : 1 ) {
- عرض : مضمنة ؛
- تعويم : يسار ؛
- العرض : ( gridColumnWidth * columnSpan ) + ( gridGutterWidth * ( columnSpan - 1 )) ؛
- الهامش - يسار : gridGutterWidth ؛
- &: أول - طفل {
- الهامش - اليسار : 0 ؛
- }
- }
- . offset ( columnOffset : 1 ) {
- الهامش - يسار : ( gridColumnWidth * columnOffset ) + ( gridGutterWidth * ( columnOffset - 1 )) ! هام .
- }