Въведение в панелите за зареждане
Съдържанието на данните трябва да е чисто, чисто и подходящо. Наличието на място в съдържанието, цветното заглавие и долния колонтитул и рамката за съдържание изглежда привлекателно. Атрактивното съдържание е лесно за четене и разбиране. Панелът за зареждане работи точно по съдържание. Използва се за бордюри за съдържание с конкретни подплънки. Работи за съдържание, заглавка, долен колонтитул и също в различен цвят. Основна работа на панела за стартиране, използвайки клас ".panel" в елемент div, с този клас ".panel-default" клас също се изисква.
Пример:
THIS IS A DEFAULT PANEL
изход:
Видове панели за зареждане
Панелите са категоризирани с различни класификации и цели, което е следното. Съдържанието има част от заглавието, тялото и долния колонтитул. За да създаде елегантно съдържание и стил с цел, панелът предлага следните категории:
1. Панел с заглавието
В заглавието на панела, рамката с рамка, обградена със заглавие на съдържанието и тяло на съдържанието с формат подплънки Панел заглавие добави клас = „заглавие на панела“ и тяло на съдържанието добави клас = „тяло на панела“.
Код:
Content Heading
Content Body
изход:
Можете да добавите клас = „панел-заглавие“, за да променяте заглавието на съдържанието отделно. Този клас се използва рядко, защото класът на заглавието на панела променя всички стилове сами.
2. Панел с Footer
В панорамата на панела, рамката с рамка, обградена със съдържание на подножието и тялото на съдържанието с формат подплънки. Footer панел add class = „панел долен колонтитул“ и body body add class = „панел-тяло“.
Код:
Content Body
Content Footer
изход:
3. Панелна група
Този панел се използва за свързване на много панели наведнъж. Той премахва полето на долния панел и прави група от панели.
Код:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
изход:
4. Панели с контекстуални класове
За да получите по-смислен контекст, bootstrap дизайн на панела различни класове за контекст. Всяко контекстно заглавие на класа има различен цвят, за да покаже въздействието на контекста. Тези класове на панели са по-долу с техните примери и резултати,
- .panel-default: Това е панелът по подразбиране, използван за контекст.
Код:
Content Heading
Content Body
изход:
- .panel-Primary: Този клас, използван за първичен контекст, означава основен контекст.
Код:
Content Heading with panel-primary class /div>
Content Body2
изход:
- .panel-success: Този клас се използва, когато някакъв контекст има значението на успеха.
Код:
Content Heading with panel-success class
Content Body3
изход:
- .panel-info: Този клас се използва, когато някой контекст има информативен характер.
Код:
Content Heading with panel-info class
Content Body4
изход:
- .panel-предупреждение: Този клас се използва, когато някакъв контекст има значението на предупредителен знак.
Код:
Content Heading with panel-warning class
Content Body5
изход:
- .panel-опасност: Този клас се използва, когато някакъв контекст има значението на опасност и иска да посочи.
Код:
Content Heading with panel-danger class
Content Body6
изход:
Примери за Bootstrap панели
Следват примерите на панела за зареждане, обяснен подробно,
Пример №1: Прост панел за зареждане
Това е прост пример за панел за зареждане по подразбиране, където са поставени заглавие на панела, долен колонтитул и тяло с описание.
Код:
Content Heading
Content Body
Panel body for context
Content Footer
изход:
Пример №2: Панел за зареждане с таблица
- В този пример вземете изхода на таблицата, като използвате панела за зареждане. Масата може да бъде модифицирана, за да изглежда елегантна. Следващият пример и изход е таблицата, използваща панела за зареждане.
- Този пример се нуждае от клас таблица, за да направи таблица. Това прави основният клас и заглавието на панела да запазва името на таблицата.
- Класът на таблицата предлага клас орган на панела. В тази таблица се поставят заглавките на таблицата и данните на таблицата.
Код:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
