Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

1. 使用图标的导航栏

使用导航栏样式：

\"\"\"\" 
<!DOCTYPE html>
<html>
<head>
<  http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
< >My Test bootstrap</ >
    <  rel=\"stylesheet\" href=\"https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css\">
    <  src=\"https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js\"></ >
    <  src=\"https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js\"></ >
</head>
<body>            
    <nav class=\"navbar navbar-default\" role=\"navigation\"> 
        <div class=\"container-fluid\"> 
            <div class=\"navbar-header\"> 
                <a class=\"navbar-brand\" href=\"#\">Test Bootstrap</a> 
            </div> 
            <ul class=\"nav navbar-nav navbar-right\"> 
                <li><a href=\"#\"><span class=\"glyphicon glyphicon-user\"></span> 注册</a></li> 
                <li><a href=\"#\"><span class=\"glyphicon glyphicon-log-in\"></span> 登录</a></li> 
            </ul> 
        </div> 
    </nav>
</body>
</html>
View Code

样式效果：

\"\"

 

2. 分页(Pagination):  是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。

\"\"

 

使用分页样式：

\"\"\"\" 
<!DOCTYPE html>
<html>
<head>
<  http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
< >My Test bootstrap</ >
    <  rel=\"stylesheet\" href=\"https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css\">
    <  src=\"https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js\"></ >
    <  src=\"https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js\"></ >
</head>
<body>            
    <ul class=\"pagination\">
        <li><a href=\"#\">&laquo;</a></li>
        <li class=\"active\"><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=\"#\">6</a></li>
        <li><a href=\"#\">&raquo;</a></li>
    </ul>
</body>
</html>
View Code

样式效果：

\"\"

 

3. 标签样式

\"\"

使用样式：

\"\"\"\" 
<!DOCTYPE html>
<html>
<head>
<  http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
< >My Test bootstrap</ >
    <  rel=\"stylesheet\" href=\"https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css\">
    <  src=\"https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js\"></ >
    <  src=\"https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js\"></ >
</head>
<body>            
    <span class=\"label label-default\">默认标签</span>
    <span class=\"label label-primary\">主要标签</span>
    <span class=\"label label-success\">成功标签</span>
    <span class=\"label label-info\">信息标签</span>
    <span class=\"label label-warning\">警告标签</span>
    <span class=\"label label-danger\">危险标签</span>
</body>
</html>
View Code

样式效果：

\"\"

 

4. 徽章（Badges）：主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class=\"badge\"> 添加到链接、Bootstrap 导航等这些元素上即可。

使用徽章样式：

\"\"\"\" 
<!DOCTYPE html>
<html>
<head>
<  http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
< >My Test bootstrap</ >
    <  rel=\"stylesheet\" href=\"https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css\">
    <  src=\"https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js\"></ >
    <  src=\"https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js\"></ >
</head>
<body>            
    <ul class=\"nav nav-pills\">
        <li class=\"active\">
            <a href=\"#\">首页
                <span class=\"badge\">42</span>
            </a>
        </li>
        <li>
            <a href=\"#\">动态</a>
        </li>
        <li>
            <a href=\"#\">留言</a>
        </li>
        <li>
            <a href=\"#\">消息
                <span class=\"badge\">3</span>
            </a>
        </li>
    </ul>
</body>
</html>
View Code

样式效果：

\"\"

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章