导航与分页导航

南栀子。

于 2021-02-08 01:33:07 发布

阅读量201

点赞数

分类专栏： Bootstrap

原文链接：https://www.runoob.com/bootstrap/bootstrap-pagination.html

版权

Bootstrap 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用样式</title>
    <link rel="stylesheet" type="text/css" href="{% static 'dist/css/bootstrap.css' %}"/>
</head>
<body>
<div class="container">

    <p>标签式的导航菜单</p>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>


    <p>基本的胶囊式导航菜单</p>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>

    <p>垂直的胶囊式导航菜单</p>
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>

    <p>两端对齐的导航元素</p>
    <ul class="nav nav-pills nav-justified">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>
    <br><br><br>
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>


    <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="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
</div>
</body>
</html>

南栀子。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航与分页导航

{% load static %}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>常用样式</title> <link rel="stylesheet" type="text/css" href="{% static 'dist/css/bootstrap.css' %}"/></head>&
复制链接

扫一扫