بیش از ده ها مؤلفه قابل استفاده مجدد برای تهیه نمادنگاری ، کشویی ، گروه های ورودی ، ناوبری ، هشدارها و موارد دیگر ساخته شده است.

گلیفیکون ها

گلیف های موجود

شامل بیش از 250 گلیف در قالب قلم از مجموعه Halflings Glyphicon است. نیمی از گلیفیکون ها به طور معمول به صورت رایگان در دسترس نیستند ، اما خالق آنها آنها را برای بوت استرپ بدون هزینه در دسترس قرار داده است. به عنوان یک تشکر ، ما فقط از شما می خواهیم که هر زمان ممکن ، پیوندی را به گلیفیکون ها درج کنید.

• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون به علاوه
• گلیفیکون گلیفیکون-یورو
• گلیفیکون گلیفیکون-یورو
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• مداد گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون
• گلیفیکون گلیفیکون جستجوگر
• Glyphicon Glyphicon-Heart
• گلیفیکون گلیفیکون ستاره
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون فیلم
• گلیفیکون گلیفیکون بزرگ
• Glyphicon Glyphicon-th
• لیست گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-اوک
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-زوم
• گلیفیکون گلیفیکون-زوم
• Glyphicon Glyphicon-Off
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• زباله گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون خانه
• گلیفیکون گلیفیکون
• Glyphicon Glyphicon-Time
• گلیفیکون گلیفیکون جاده
• گلیفیکون گلیفیکون بارگذاری
• گلیفیکون گلیفیکون بارگذاری
• گلیفیکون گلیفیکون
• جعبه گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون را تکرار می کند
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-لیست
• گلیفیکون گلیفیکون قفل
• گلیفیکون گلیفیکون
• قلعهای گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-حجم
• گلیفیکون گلیفیکون- حجم
• کد گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون برچسب
• گلیفیکون گلیفیکون برچسب زدن
• کتاب گلیفیکون گلیفیکون
• کتابچه گلیفیکون گلیفیکون
• چاپ گلیفیکون گلیفیکون
• دوربین گلیفیکون
• Glyphicon Glyphicon-Font
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• Glyphicon Glyphicon-Text-Height
• Glyphicon Glyphicon-Text-Width
• گلیفیکون گلیفیکون-چپ
• گلیفیکون گلیفیکون-مرکز
• گلیفیکون گلیفیکون-راست
• Glyphicon Glyphicon-align-justify
• لیست گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-چپ
• گلیفیکون گلیفیکون-راست
• Glyphicon Glyphicon-Facetime-Video
• تصویر گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-نقشه
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-رنگ
• گلیفیکون گلیفیکون-ویرایش
• Glyphicon Glyphicon-Share
• گلیفیکون گلیفیکون چک
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون به جلو
• گلیفیکون گلیفیکون سریع
• گلیفیکون گلیفیکون به عقب
• Glyphicon Glyphicon-Play
• مکث گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-توقف
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون سریع
• گلیفیکون گلیفیکون به جلو
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون چپ
• گلیفیکون گلیفیکون-شورون
• گلیفیکون گلیفیکون به علاوه امضاء
• گلیفیکون گلیفیکون-منونوس
• Glyphicon Glyphicon-remove-sign
• گلیفیکون گلیفیکون-امضاء
• گلیفیکون گلیفیکون-امضاء
• گلیفیکون گلیفیکون-ایفای امضاء
• صفحه نمایش گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• سینمای گلیفیکون
• گلیفیکون گلیفیکون-چپ
• گلیفیکون گلیفیکون راست
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-مقیم کامل
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-عقاید امضاء
• Glyphicon Glyphicon Gift
• برگ گلیفیکون برگ
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون چشم
• گلیفیکون گلیفیکون چشم
• گلیفیکون گلیفیکون هشدار دهنده
• گلیفیکون گلیفیکون هواپیما
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-چورن
• گلیفیکون گلیفیکون-شورون
• برگه گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-مبهم
• گلیفیکون گلیفیکون-مقادیر عمودی
• گلیفیکون گلیفیکون-مقانا از آن
• Glyphicon Glyphicon-HDD
• گلیفیکون گلیفیکون-بولورن
• گلیفیکون گلیفیکون بلوط
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-
• گلیفیکون گلیفیکون-کشو
• گلیفیکون گلیفیکون راست
• گلیفیکون گلیفیکون دست چپ
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-دایرهای راست
• گلیفیکون گلیفیکون-دایرهای چپ
• گلیفیکون گلیفیکون-دایره
• گلیفیکون گلیفیکون-دایره
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-کار
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون بریج
• صفحه نمایش گلیفیکون گلیفیکون گلیفیکون
• تخته سنگ گلیفیکون گلیفیکون
• کاغذ گلیفیکون گلیفیکون
• Glyphicon Glyphicon-Heart- خالی
• گلیفیکون گلیفیکون لینک
• Glyphicon Glyphicon-Phone
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-USD
• Glyphicon Glyphicon-GBP
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-واریته
• گلیفیکون گلیفیکون-گلیفیکون به صورت alphabet-alphabet
• گلیفیکون گلیفیکون-مرتب
• گلیفیکون گلیفیکون به صورت سفارش
• گلیفیکون گلیفیکون-مرتب
• Glyphicon Glyphicon-Glyphicon-Glyphicon-
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-لگ
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-پنجره
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون ذخیره شده
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-گل
• گلیفیکون گلیفیکون گلف
• گلیفیکون گلیفیکون گلفیکون
• گلیفیکون گلیفیکون-فلوپی
• گلیفیکون گلیفیکون-فلوپی
• کارتن
• گلیفیکون گلیفیکون انتقال دهنده
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• تلفن گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-تلفن
• برج گلیفیکون گلیفیکون
• Glyphicon Glyphicon-Stats
• Glyphicon Glyphicon-SD-Video
• Glyphicon Glyphicon-HD-Video
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-صدا
• Glyphicon Glyphicon-Sound-5-1
• Glyphicon Glyphicon-Sound-6-1
• Glyphicon Glyphicon-Sound-7-1
• گلیفیکون گلیفیکون-کپی رایت
• گلیفیکون گلیفیکون-ثبت نام
• گلیفیکون گلیفیکون-ابر بارگذاری
• گلیفیکون گلیفیکون-ابر
• گلیفیکون گلیفیکون-درخت
• گلیفیکون گلیفیکون-
• Glyphicon Glyphicon-CD
• پرونده گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• سطح گلیفیکون در سطح گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون چسباندن
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون اسقف
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-کودک
• گلیفیکون گلیفیکون
• تخته گلیفیکون گلیفیکون-سیاه
• گلیفیکون گلیفیکون بستر
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• ساعت گلیفیکون گلیفیکون گلیفیکون گلیفیکون ساعت
• گلیفیکون گلیفیکون لامپ
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-پیج
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون بیتکوین
• Glyphicon Glyphicon-BTC
• Glyphicon Glyphicon-XBT
• گلیفیکون گلیفیکون ین
• گلیفیکون گلیفیکون-جیپی
• گلیفیکون گلیفیکون- ریبا
• گلیفیکون گلیفیکون
• در مقیاس گلیفیکون
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-یخ زده
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-گزینه
• گلیفیکون گلیفیکون-گزینه
• گلیفیکون گلیفیکون-منو
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون روغن
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون
• اندازه گلیفیکون گلیفیکون اندازه
• گلیفیکون گلیفیکون رنگ
• Glyphicon Glyphicon-Text-Background
• گلیفیکون گلیفیکون-اوبات-بالا
• گلیفیکون گلیفیکون-object- پایین
• گلیفیکون گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون-اوبات-چپ
• گلیفیکون گلیفیکون-اوبات-عمودی
• گلیفیکون گلیفیکون-اوبات-راست
• گلیفیکون گلیفیکون-مثلث راست
• گلیفیکون گلیفیکون-مثلث چپ
• گلیفیکون گلیفیکون-مثلث
• گلیفیکون گلیفیکون-مثلث بالا
• گلیفیکون گلیفیکون
• نسخه گلیفیکون گلیفیکون
• نسخه گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون چپ
• گلیفیکون گلیفیکون راست
• گلیفیکون گلیفیکون
• گلیفیکون گلیفیکون

نحوه استفاده

به دلایل عملکرد ، همه نمادها به کلاس پایه و کلاس نمادین نیاز دارند. برای استفاده ، کد زیر را تقریباً در هر نقطه قرار دهید. برای بالشتک مناسب حتماً فضایی بین نماد و متن بگذارید.

با سایر اجزای مخلوط نشوید

کلاس های نماد نمی توانند مستقیماً با سایر مؤلفه ها ترکیب شوند. آنها نباید به همراه کلاسهای دیگر در همان عنصر استفاده شوند. در عوض ، یک تو در تو اضافه کنید و کلاس های نماد را در آن اعمال کنید.

فقط برای استفاده در عناصر خالی

کلاس های نماد فقط باید در عناصری که حاوی محتوای متن هستند و هیچ عناصر فرزند ندارند ، استفاده شود.

تغییر مکان فونت نماد

Bootstrap فرض می کند که پرونده های فونت نماد در فهرست ../fonts/ ، نسبت به پرونده های CSS کامپایل شده قرار می گیرند. جابجایی یا تغییر نام آن پرونده های قلم به معنای به روزرسانی CSS در یکی از سه روش است:

• متغیرهای @icon-font-path و/یا @icon-font-name را در منبع کمتری تغییر دهید.
• از گزینه URL های نسبی ارائه شده توسط کامپایلر کمتر استفاده کنید.
• مسیرهای URL () را در CSS کامپایل شده تغییر دهید.

از هر گزینه ای استفاده کنید که مناسب تنظیم توسعه خاص شما باشد.

نمادهای قابل دسترسی

نسخه های مدرن فن آوری های کمکی ، محتوای تولید شده CSS و همچنین شخصیت های خاص یونیکد را اعلام می کنند. برای جلوگیری از خروجی ناخواسته و گیج کننده در خوانندگان صفحه نمایش (به ویژه هنگامی که از آیکون ها صرفاً برای دکوراسیون استفاده می شوند) ، ما آنها را با ویژگی aria-hidden = "true" پنهان می کنیم.

اگر از یک نماد برای انتقال معنی استفاده می کنید (به جای فقط به عنوان یک عنصر تزئینی) ، اطمینان حاصل کنید که این معنی نیز به فن آوری های کمکی منتقل می شود-به عنوان مثال ، محتوای اضافی را شامل می شود ، که بصری با کلاس . SR فقط مخفی شده است.

اگر در حال ایجاد کنترل هایی با متن دیگری هستید (مانند مواردی که فقط حاوی یک نماد است) ، همیشه باید محتوای جایگزین را برای شناسایی هدف کنترل ارائه دهید ، تا این امر برای کاربران فن آوری های کمکی معنی داشته باشد. در این حالت ، می توانید یک ویژگی برچسب آریا را در خود کنترل اضافه کنید.

محتوای دلخواه

با کمی نشانه گذاری اضافی ، می توان هر نوع محتوای HTML مانند عناوین ، پاراگراف ها یا دکمه ها را به تصاویر کوچک اضافه کرد.

برچسب کوچک

فردا درمانی ، نفرت ، پروتئین و آنتی اکسیدان ها در ، اجرای Eget. متأسفانه ، این توسعه دهنده دروازه من نیست که از ترس شیمیایی باردار است. رله شناسه مصرف کننده وسایل نقلیه Ultricies مانند این منطقه.

برچسب کوچک

فردا درمانی ، نفرت ، پروتئین و آنتی اکسیدان ها در ، اجرای Eget. متأسفانه ، این توسعه دهنده دروازه من نیست که از ترس شیمیایی باردار است. رله شناسه مصرف کننده وسایل نقلیه Ultricies مانند این منطقه.

برچسب کوچک

فردا درمانی ، نفرت ، پروتئین و آنتی اکسیدان ها در ، اجرای Eget. متأسفانه ، این توسعه دهنده دروازه من نیست که از ترس شیمیایی باردار است. رله شناسه مصرف کننده وسایل نقلیه Ultricies مانند این منطقه.

کلاس. آنها تقریباً معادل . Media-Left و . Media-Right هستند ، به جز این که باید از سمت راست . Media پس از . Media-Body در HTML قرار گیرد.

تراز رسانه ها

تصاویر یا رسانه های دیگر را می توان از بالا ، وسط یا پایین تراز کرد. پیش فرض بالایی است.

رسانه های برتر تراز

فردا هویج nibh در صفر باردار رایگان است. قبل از راحتی Sollicitudin ، هیچ یا بیشتر کارت شکلات نیست. فردا نفرت فلفل دلمه ای ، تولید در آسیب های در زمان کشیدن زشت. سس بالینی در حال حاضر و در صورت آسیب پذیری اکولوژیکی. تا وام دامن در گلو.

متأسفانه ، اما من از آن متنفرم. تهی که لبخند نرم یا فوتبال را لبخند می زند. هنگامی که پرتوهای و فشار زیادی از کوهها را می کشد ، متولد می شود.

رسانه های هم تراز شده

فردا هویج nibh در صفر باردار رایگان است. قبل از راحتی Sollicitudin ، هیچ یا بیشتر کارت شکلات نیست. فردا نفرت فلفل دلمه ای ، تولید در آسیب های در زمان کشیدن زشت. سس بالینی در حال حاضر و در صورت آسیب پذیری اکولوژیکی. تا وام دامن در گلو.

متأسفانه ، اما من از آن متنفرم. تهی که لبخند نرم یا فوتبال را لبخند می زند. هنگامی که پرتوهای و فشار زیادی از کوهها را می کشد ، متولد می شود.

رسانه های تراز پایین

فردا هویج nibh در صفر باردار رایگان است. قبل از راحتی Sollicitudin ، هیچ یا بیشتر کارت شکلات نیست. فردا نفرت فلفل دلمه ای ، تولید در آسیب های در زمان کشیدن زشت. سس بالینی در حال حاضر و در صورت آسیب پذیری اکولوژیکی. تا وام دامن در گلو.

متأسفانه ، اما من از آن متنفرم. تهی که لبخند نرم یا فوتبال را لبخند می زند. هنگامی که پرتوهای و فشار زیادی از کوهها را می کشد ، متولد می شود.

 کلاس="رسانه ها">  کلاس="میانه چپ وسط وسط">  href="#">  کلاس="شیء رسانه ای" src=". " alt=". ">    کلاس="وسط بدن">  کلاس="سرفصل رسانه">رسانه های هم تراز شده . 

لیست رسانه ها

با کمی نشانه گذاری اضافی، می توانید از رسانه های داخل لیست (مفید برای موضوعات نظرات یا لیست مقالات) استفاده کنید.

عنوان رسانه

فردا باید آزاد باشد، بدون بارداری. نیازی به نگرانی در مورد ایمنی محصول نیست. فردا نفرت خالص، دهلیزی در vulputate at، tempus viverra turpis.

عنوان رسانه تو در تو

فردا باید آزاد باشد، بدون بارداری. نیازی به نگرانی در مورد ایمنی محصول نیست. فردا نفرت خالص، دهلیزی در vulputate at، tempus viverra turpis.

عنوان رسانه تو در تو

فردا باید آزاد باشد، بدون بارداری. نیازی به نگرانی در مورد ایمنی محصول نیست. فردا نفرت خالص، دهلیزی در vulputate at، tempus viverra turpis.

عنوان رسانه تو در تو

فردا باید آزاد باشد، بدون بارداری. نیازی به نگرانی در مورد ایمنی محصول نیست. فردا نفرت خالص، دهلیزی در vulputate at، tempus viverra turpis.

 کلاس="فهرست رسانه ای">  کلاس="رسانه ها">  کلاس="چپ میانه">  href="#">  کلاس="شیء رسانه ای" src=". " alt=". ">    کلاس="وسط بدن">  کلاس="سرفصل رسانه">عنوان رسانه .  

گروه لیست

گروه های لیست یک جزء انعطاف پذیر و قدرتمند برای نمایش نه تنها لیست های ساده از عناصر، بلکه لیست های پیچیده با محتوای سفارشی هستند.

مثال اساسی

ابتدایی ترین گروه لیست به سادگی یک لیست نامرتب با آیتم های لیست و کلاس های مناسب است. با گزینه های زیر، یا در صورت نیاز CSS خود را بر اساس آن بسازید.

• فقط از فردا متنفرم
• پروتئین ها و چربی ها در
• حالم از خنده بهم میخوره
• دروازه و تعقیب خواهد شد و
• دهلیزی در اروس

 کلاس="فهرست-گروه">  کلاس="list-group-item">فقط از فردا متنفرم  کلاس="list-group-item">پروتئین ها و چربی ها در  کلاس="list-group-item">حالم از خنده بهم میخوره  کلاس="list-group-item">دروازه و تعقیب خواهد شد و  کلاس="list-group-item">دهلیزی در اروس 

نشان ها

جزء نشان ها را به هر مورد از گروه لیست اضافه کنید و به طور خودکار در سمت راست قرار می گیرد.

• 14 فردا فقط متنفر باشید
• 2 پروتئین و چربی در
• 1 بیماری خنده

 کلاس="فهرست-گروه">  کلاس="list-group-item">  کلاس="نشان">14Cras justo odio 

موارد مرتبط

• ). بدون نیاز به تک تک والدین در اطراف هر عنصر.

   

 کلاس="فهرست-گروه">  href="#" کلاس="list-group-item فعال">Cras justo odio  href="#" کلاس="list-group-item">پروتئین ها و چربی ها در  href="#" کلاس="list-group-item">حالم از خنده بهم میخوره  href="#" کلاس="list-group-item">دروازه و تعقیب خواهد شد و  href="#" کلاس="list-group-item">دهلیزی در اروس 

آیتم های دکمه ای

• ). بدون نیاز به تک تک والدین در اطراف هر عنصر. در اینجا از کلاس های استاندارد . btn استفاده نکنید.

   

Cras justo odio Dapibus ac facilisis در Morbi leo risus Porta ac consectetur ac Vestibulum at eros

 کلاس="فهرست-گروه">  نوع="دکمه" کلاس="list-group-item">فقط از فردا متنفرم  نوع="دکمه" کلاس="list-group-item">پروتئین ها و چربی ها در  نوع="دکمه" کلاس="list-group-item">حالم از خنده بهم میخوره  نوع="دکمه" کلاس="list-group-item">دروازه و تعقیب خواهد شد و  نوع="دکمه" کلاس="list-group-item">دهلیزی در اروس 

موارد غیر فعال

. disabled را به یک . list-group-item اضافه کنید تا آن را خاکستری کنید تا غیرفعال به نظر برسد.

 کلاس="فهرست-گروه">  href="#" کلاس="list-group-item disabled">Cras justo odio  href="#" کلاس="list-group-item">پروتئین ها و چربی ها در  href="#" کلاس="list-group-item">حالم از خنده بهم میخوره  href="#" کلاس="list-group-item">دروازه و تعقیب خواهد شد و  href="#" کلاس="list-group-item">دهلیزی در اروس 

کلاس های متنی

از کلاس های متنی برای استایل دادن به آیتم های لیست، پیش فرض یا پیوند داده شده استفاده کنید. همچنین شامل حالت فعال است.

• پروتئین ها و چربی ها در
• کراس سیت آمت نیبه لیبرو
• دروازه و تعقیب خواهد شد و
• دهلیزی در اروس

 کلاس="فهرست-گروه">  کلاس="list-group-item list-group-item-success">پروتئین ها و چربی ها در  کلاس="list-group-item list-group-item-info">کراس سیت آمت نیبه لیبرو  کلاس="list-group-item list-group-item-waing">دروازه و تعقیب خواهد شد و  کلاس="list-group-item list-group-item-danger">دهلیزی در اروس   کلاس="فهرست-گروه">  href="#" کلاس="list-group-item list-group-item-success">پروتئین ها و چربی ها در  href="#" کلاس="list-group-item list-group-item-info">کراس سیت آمت نیبه لیبرو  href="#" کلاس="list-group-item list-group-item-waing">دروازه و تعقیب خواهد شد و  href="#" کلاس="list-group-item list-group-item-danger">دهلیزی در اروس 

محتوای دلخواه

تقریباً هر HTML را در داخل اضافه کنید، حتی برای گروه های لیست پیوندی مانند زیر.

عنوان مورد گروه را فهرست کنید

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

عنوان مورد گروه را فهرست کنید

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

عنوان مورد گروه را فهرست کنید

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

 کلاس="فهرست-گروه">  href="#" کلاس="list-group-item فعال">  کلاس="list-group-item-heading">عنوان مورد گروه را فهرست کنید  کلاس="list-group-item-text">.  

پانل ها

اگرچه همیشه لازم نیست، گاهی اوقات لازم است DOM خود را در یک جعبه قرار دهید. برای آن مواقع، مؤلفه پانل را امتحان کنید.

مثال اساسی

به طور پیش فرض، تمام کاری که . panel انجام می دهد این است که برخی از حاشیه ها و بالشتک های اولیه را اعمال می کند تا حاوی محتوایی باشد.

نمونه پنل پایه

 کلاس="پانل پانل-پیش فرض">  کلاس="بدنه پانل">نمونه پنل پایه 

پانل با عنوان

با . panel-heading به راحتی یک محفظه عنوان به پانل خود اضافه کنید. همچنین می توانید هر - با یک کلاس . panel-title را برای اضافه کردن یک عنوان از پیش طراحی شده اضافه کنید. با این حال، اندازه فونت - با . panel-heading لغو می شود.

برای رنگ آمیزی مناسب پیوند، حتماً پیوندها را در سرفصل ها در . panel-title قرار دهید.

عنوان پانل بدون عنوان محتوای پنل

عنوان پنل

محتوای پنل

 کلاس="پانل پانل-پیش فرض">  کلاس="سربرگ پانل">عنوان پانل بدون عنوان  کلاس="بدنه پانل">محتوای پنل   کلاس="پانل پانل-پیش فرض">  کلاس="سربرگ پانل">  کلاس="عنوان پنل">عنوان پنل   کلاس="بدنه پانل">محتوای پنل 

پنل با پاورقی

دکمه ها یا متن ثانویه را در . panel-footer قرار دهید. توجه داشته باشید که فوترهای پانل هنگام استفاده از تغییرات متنی رنگ ها و حاشیه ها را به ارث نمی برند زیرا قرار نیست در پیش زمینه قرار بگیرند.

محتوای پنل پاورقی پنل

 کلاس="پانل پانل-پیش فرض">  کلاس="بدنه پانل">محتوای پنل  کلاس="پانل پاورقی">پاورقی پنل 

جایگزین های متنی

مانند سایر مؤلفه ها، به راحتی با افزودن هر یک از کلاس های حالت متنی، پانل را برای یک زمینه خاص معنادارتر کنید.