8.cards

block

<div class="card">
    <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, voluptate.
    </div>
</div>

simple card

<div class="card" style="width: 20rem;">
    <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <h6 class="card-subtitle text-muted">Card subtitle</h6>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
        <a class="btn btn-outline-primary" href="#">Read More</a>
    </div>
</div>

card with image

<div class="card">
    <img class="card-img-top" src="https://source.unsplash.com/random/300x200" alt="">
    <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
        <a class="btn btn-primary" href="#">Read More</a>
    </div>
</div>

card with header

<div class="card">
    <div class="card-header">
        My Card
    </div>
    <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
        <a class="btn btn-danger" href="#">Read More</a>
    </div>
</div>

header, footer, centered

<div class="card text-center">
    <div class="card-header">
        My Card
    </div>
    <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
        <a class="btn btn-dark" href="#">Read More</a>
    </div>
    <div class="card-footer text-muted">
        2 Days Ago
    </div>
</div>

card with nav

<div class="card">
    <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="#">Disabled</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
        <a class="btn btn-primary" href="#">Read More</a>
    </div>
</div>

image overlays

<div class="card">
    <img class="card-img" src="https://source.unsplash.com/random/1000x300" alt="">
    <div class="card-img-overlay">
        <h4 class="card-title">Card title</h4>
        <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>

background color

<div class="card bg-primary text-white mb-5">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
</div>

<div class="card bg-secondary text-white mb-5">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h4 class="card-title">Secondary card title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
</div>

<div class="card bg-success text-white mb-5">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h4 class="card-title">Success card title</h4>
        <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>
    </div>
</div>

<div class="card bg-danger text-white mb-5">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h4 class="card-title">Danger card title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
</div>

<div class="card bg-warning text-white mb-5">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h4 class="card-title">Warning card title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
</div>
<div class="card bg-info text-white mb-5">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h4 class="card-title">Info card title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
</div>
<div class="card bg-light text-dark mb-5">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h4 class="card-title">Light card title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
</div>
<div class="card bg-dark text-white mb-5">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h4 class="card-title">Dark card title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
</div>

card outline

<div class="card border-primary mb-5">
    <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
</div>

<div class="card border-secondary mb-5">
    <div class="card-body">
        <h4 class="card-title">Secondary card title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
</div>

<div class="card border-success mb-5">
    <div class="card-body">
        <h4 class="card-title">Success card title</h4>
        <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>
    </div>
</div>

<div class="card border-danger mb-5">
    <div class="card-body">
        <h4 class="card-title">Danger card title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
</div>

<div class="card border-warning mb-5">
    <div class="card-body">
        <h4 class="card-title">Warning card title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
</div>

<div class="card border-info mb-5">
    <div class="card-body">
        <h4 class="card-title">Info card title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
</div>

<div class="card border-danger mb-5">
    <div class="card-body">
        <h4 class="card-title">Light card title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
</div>

<div class="card border-dark mb-5">
    <div class="card-body">
        <h4 class="card-title">Dark card title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    </div>
</div>

card columns

<div class="card-columns">
    <div class="card">
        <img class="card-img-top img-fluid" src="https://source.unsplash.com/random/300x200" alt="">
        <div class="card-body">
            <h4 class="card-title">Card title that wraps to a new line</h4>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                additional content.
                This content
                is a little bit longer.</p>
        </div>
    </div>
    <div class="card p-3">
        <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer>
                <small>
                    Someone famous in
                    <cite title="Source Title">Source Title</cite>
                </small>
            </footer>
        </blockquote>
    </div>
    <div class="card">
        <img class="card-img-top image-fluid" src="https://source.unsplash.com/random/301x200" alt="">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional
                content.</p>
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
        </div>
    </div>
    <div class="card bg-dark text-white p-3">
        <blockquote class="card-bodyquote">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
            <footer class="blockquote-footer">
                <small>
                    Someone famous in
                    <cite title="Source Title">Source Title</cite>
                </small>
            </footer>
        </blockquote>
    </div>
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional
                content.</p>
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top img-fluid" src="https://source.unsplash.com/random/302x200" alt="">
    </div>
    <div class="card p-3">
        <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer">
                <small>
                    Someone famous in
                    <cite title="Source Title">Source Title</cite>
                </small>
            </footer>
        </blockquote>
    </div>
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                additional content. This
                card
                has even longer content than the first to show that equal height action.</p>
            <p class="card-text">
                <small class="text-muted">Last updated 3 mins ago</small>
            </p>
        </div>
    </div>
</div>

posted @ 2018-09-10 20:03 ret 阅读(71) 评论(0) 收藏举报

刷新页面返回顶部

ret

8.cards

公告