Төп эчтәлеккә күчү Документлар навигациясенә күчү
Check
in English

Фигуралар

Bootstrap'та фигуралы компонент белән бәйләнгән рәсемнәрне һәм текстны күрсәтү өчен документлар һәм мисаллар.

Бу биттә

Contentәрвакыт сезгә эчтәлек күрсәтергә кирәк - өстәмә язу булган рәсем кебек, a кулланырга уйлагыз <figure>.

HTML5 һәм элементлар өчен төп стильләр белән тәэмин итү өчен .figureкертелгән классларны кулланыгыз . Фигуралардагы рәсемнәрнең зурлыгы юк, шуңа күрә классны җаваплы итеп өстәргә онытмагыз..figure-img.figure-caption<figure><figcaption>.img-fluid<img>

Placeholder 400x300
Aboveгарыдагы рәсем өчен язу.
html
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Фигураның язмасын тигезләү безнең текст ярдәмендә җиңел .

Placeholder 400x300
Aboveгарыдагы рәсем өчен язу.
html
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

Сасс

Variзгәрешләр

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;