Lesson 50 of WEB front end - BootStrap components Card and Carousel

1.Card

A container that can add images, titles, text, lists, buttons, etc. or one content.

(1) basic style

Main components:

① card container, < div class = "card" >

③ pictures, < img # class = "card img top" >, can be placed before or after # body

④ card body, < div class = "card body" >, one card can contain more than one card body

⑤ card title, < H5 class = "card title" >

⑥ card text, < p class = "card text" >

⑦ card connection, < a class="btn BTN - *" >, multiple connection buttons or other buttons can be used

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

(2) add list group

You can add a list group to the card as needed, that is, add a {UL > lilist inside the card

Main components:

① card container, < div class = "card" >

② list, < ul class = "list group" list group flush ">

③ list li, < li class = "list group item" >

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

(3) header and footer

① the head style can be added at a certain position in the card according to the demand. The example is as follows:

      <div class="card-header"> HeaderText </div>

". card header" can also be added to < h * > tags or other tags.

② you can add a footer style to the card, for example:

      <div class="card-footer"> FooterText </div>

ps: you can add ". Text - *" font style or alignment style to the text content in the card.

(4) responsive card

The card can be wrapped in the grid system as needed to meet the responsive demand. Examples are as follows:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Special title treatment</h5>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Special title treatment</h5>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>
</div>

(5) card layout

① card size

The width of the card can be set through the in-line style, such as: style="width: 18rem";

Class = "boot25" can also be preset;

② text alignment

To set uniform alignment or font style for cards, you only need to define ". text - *" class on the card container.

③ card background color

Set the background color of the card by defining the ". bg - *" class of the card container, such as bg primary, bg secondary, etc

④ card frame

Define the ". Border - *" class for the "card" container, and set the border style of the card, such as border success, BG danger, etc

⑤ card font

You can set the font styles of # card container or # body respectively, such as text white, text muted, text warning, etc

ps: different font, border, background and other styles can be set for the header, footer and body of the card.

(6) card navigation

You can add a navigation bar to the card to achieve the effect of the tab (switch the content of the # card body with the # js code).

Add the # ul list before # card body (wrapped by div),

There are three main classes added to the ul element: nav, . nav-tabs, . card-header-tabs;

The main classes added to the li element are: nav-item;

Define the active state of the tab in the content element.

< UL > in addition to defining the "* - tabs" style, you can also define other styles, such as: < UL class = "NAV NAV rolls card header rolls" >

Examples are as follows:

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

(7) image coverage

The picture in the card can be presented as the background picture of the text content,

At this time, the picture and card body mentioned in the basic style need to set different classes.

① picture, < img class = "card img" >

② card body, < div class = "card img Overlay" >

Examples are as follows:

<div class="card bg-dark text-white w-25">
    <img src="Images/stair.jpg" class="card-img" alt="...">
    <div class="card-img-overlay">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text">Last updated 3 mins ago</p>
    </div>
</div>

(8) horizontal arrangement

The horizontal arrangement of images and text contents is realized by placing them in containers with responsive layout.

<div class="card" style="max-width: 600px;">
    <div class="row no-gutters">
        <div class="col-md-4">
            <img src="Images/stair.jpg" class="card-img" alt="...">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>
</div>

ps: Yes The ". No gutters" style is added to the div of row class to remove the outer margin of row and the inner margin of sub selector {col.

(9) card set

A group container is nested outside multiple cards with the same width and height to form a card group.

Class = "card group", each card is next to each other

Class = "card deck", there is a space between each card (also known as card deck)

(10) others

Grid card, which can control the maximum number of cards displayed in each line

The card column can be similar to the waterfall flow layout card

2. Rotation chart

(1) foundation framework

It consists of 4 layers:

① outer container, the container of all controls of the whole rotation chart,

". carousel" class is a required rotation style

The ". slide" class defines the sliding effect

The data ride = "carousel" attribute is used for auto start rotation

"id" is used for calls between internal controls

② internal container

It is used to wrap the main content of the carousel

      class="carousel-inner"

③ picture container

img image for wrapping

      class="carousel-item active"

④ img image

Class = "block" is defined as "block level W", and the element size is set to "block level D"

Examples are as follows:

    <div id="carouselExample" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="Images/rotation01.jpg" class="d-block w-25" alt="...">
            </div>
            <div class="carousel-item">
                <img src="Images/rotation02.jpg" class="d-block w-25" alt="...">
            </div>
            <div class="carousel-item">
                <img src="Images/rotation03.jpg" class="d-block w-25" alt="...">
            </div>
        </div>
    </div>

(2) in the basic framework, you can also add a variety of element contents and rotation effects:

① sliding button

Use the < a > label as the button container

Style class, class = "carousel control prev", defines the corresponding direction style

Link, href="#carouselExample", the link is the same as the outer container "id"

Attribute, data slide = "prev", defining sliding events

Button < span >, class = "carousel control prev icon", define button icon

② anchor point indication

Set anchor identification using ol unordered list

Anchor < ol >, class = "carousel indicators"

Anchor < li > target, data target = "#carouselexample", the same as the outer container "id"

Anchor < li > attribute, data slide to = "0", associated with the index position of the corresponding picture

Anchor < li > class, class="active", which defines the active state of loading page

③ picture description

Add a} div text container to the picture container

      class="carousel-caption d-none d-md-block"

④ fade in and fade out

Directly add ". Carousel fade" class in the outer container

⑤ automatic rotation

Add the {data interval = "TimeValue" attribute to the image container} div

Examples are as follows:

    <div id="carouselExample" class="carousel slide w-25 carousel-fade" data-ride="carousel">
<!--    Anchor point indicator of rotation chart    -->
        <ol class="carousel-indicators">
            <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExample" data-slide-to="1"></li>
            <li data-target="#carouselExample" data-slide-to="2"></li>
        </ol>
<!--    Main picture of rotation chart    -->
        <div class="carousel-inner">
            <div class="carousel-item active" data-interval="1000">
                <img src="Images/rotation01.jpg" class="d-block" alt="...">
<!--            Rotation picture text description    -->
                <div class="carousel-caption d-none d-md-block">
                    <h5>First slide label</h5>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            </div>
            <div class="carousel-item" data-interval="2000">
                <img src="Images/rotation02.jpg" class="d-block" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Second slide label</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="Images/rotation03.jpg" class="d-block" alt="...">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Third slide label</h5>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
<!--    Wheel chart manual button    -->
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

 

Reference source: BootStrap Chinese network( https://v3.bootcss.com/ )

Posted by JCBarry on Sun, 15 May 2022 12:51:00 +0300