初学 Bootstrap 分页 标签 徽章 巨幕

一.分页

比较简单,给 <ul> 标签加上 .pagination 类样式就可以

<ul class="pagination">
    <li><a href="">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="">&raquo;</a></li>
</ul>

file

二.标签

标签云估计就是用这个做出来的,做个试试

<div class="container">
    <div class="row">
        <div class="col-sm-2 col-sm-offset-4">
            <span style="display: inline-block;" class="label label-warning">初学PHP</span>
            <span style="display: inline-block;" class="label label-warning">创建对象</span>
            <span style="display: inline-block;" class="label label-warning">初学Bootstrap</span>
            <span style="display: inline-block;" class="label label-warning">栅格系统</span>
            <span style="display: inline-block;" class="label label-warning">回调函数</span>
            <span style="display: inline-block;" class="label label-warning">闭包</span>
            <span style="display: inline-block;" class="label label-warning">匿名函数</span>
            <span style="display: inline-block;" class="label label-warning">类的自动加载</span>
            <span style="display: inline-block;" class="label label-warning">递归</span>
        </div>
    </div>
</div>

file

三.徽章

可以将带有 .badge 类样式的 <span> 标签,嵌入到链接,按钮,导航中,获得徽章效果,如果徽章中没有内容,徽章会自动隐藏.

<a href="#">提醒 <span class="badge">3</span></a>
<button class="btn btn-primary" type="button">新消息 <span class="badge">4</span></button>

file

四.巨幕

<div> 标签添加上 .jumbotron 类样式,就看到巨幕了,很赞的效果

<div class="jumbotron">
    <h1>欢迎来到我的网站</h1>
    <p>从这里开始...</p>
    <button class="btn btn-success">登陆</button>
</div>

file

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!