bootstrap学习笔记——09——路径分页标签和徽章组件

最新推荐文章于 2020-01-18 12:10:18 发布
最新推荐文章于 2020-01-18 12:10:18 发布
阅读量198 收藏
点赞数
分类专栏： bootstrap 文章标签： 路径分页标签和徽章组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40680190/article/details/80737394
版权

四个组件功能：路径组件、分页组件、标签组件和徽章组件。

  • 路径组件

       路径组件也叫做面包屑导航。
     //面包屑导航
<ol class="breadcrumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品列表</a></li>
    <li  class="active">韩版2011九分裤</li>
  </ol>

  • 分页组件
    分页组件可以提供带有展示页面的功能
    //默认分页
    <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>

    //首选项和禁用
    <li class="active"><a href="#">1</a></li>
       <li class="disabled"><a href="#">2</a></li>

    //设置尺寸，四种lg、默认、sm和xs
    <ul class="pagination   pagination-lg">

    <ul class="pagination   pagination-xs">

    <ul class="pagination   pagination-sm">

    //翻页效果
    <ul class="pager">
         <li><a href="#">上一页</a></li>
         <li><a href="#">下一页</a></li>
       </ul>

    //对齐翻页链接
     <ul class="pager">
         <li class="previous"><a href="#">上一页</a></li>
         <li class="next"><a href="#">下一页</a></li>
       </ul>

    //翻页项禁用

<li class="next disabled"><a href="#">下一页</a></li>

 

  • 标签

   //在文本后面带上标签
 <h3>标签<span class="label label-default">new</span></h3>

   <h3>标签<span class="label label-primary">new</span></h3>

   <h3>标签<span class="label label-success">new</span></h3>

   <h3>标签<span class="label label-info">new</span></h3>

   <h3>标签<span class="label label-warning">new</span></h3>

   <h3>标签<span class="label label-danger">new</span></h3>

特别注意的是：
  标签的大小根据前面的h3、h6......标签的变化而改变大小。

 

  • 徽章
    //未读信息数据徽章
     <a href="#">信息<span class="badge">10</span></a>

    //按钮中使用徽章
      <button class="btn btn-success">提交<span class="badge">3</span></button>

    //激活状态自动适配色调
    <ul class="nav nav-pills">
         <li class="active"><a href="">首页<span class="badge">2</span></a></li>
         <li class=""><a href="">资讯</a></li>
       </ul>

    学习笔记
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
      <meta    name="viewport"     content="width=device-width,initial-scale=1,maximun-scale=1,user-scalable=no" >
      <!--                      视图窗口                            宽度=设备的宽度         初始化大小为1 100%      最大为1         禁止用户缩放 -->
	<title>路径分页标签和徽章组件</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">

       <style>
          .a {
            height: 50px;
            border: 1px  solid #ccc; 
            background-color: #eee;
          }

       </style>
</head>
<body  style="margin: 50px;">

  <ol class="breadcrumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品列表</a></li>
    <li  class="active">韩版2011九分裤</li>
  </ol>

  <br>

<!-- <ul class="pagination">
  <ul class="pagination   pagination-lg">
   <ul class="pagination   pagination-xs"> -->
   <ul class="pagination   pagination-sm">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li   class="active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li  class="disabled"><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">»</a></li>
  </ul>

<br>

   <!-- <li class="active"><a href="#">1</a></li>
   <li class="disabled"><a href="#">2</a></li> -->

   <br>
   <ul class="pager">
     <li><a href="#">上一页</a></li>
     <li><a href="#">下一页</a></li>
   </ul>

   <br>

   <ul class="pager">
     <li class="previous"><a href="#">上一页</a></li>
     <!-- <li class="next"><a href="#">下一页</a></li> -->
     <li class="next disabled"><a href="#">下一页</a></li>
   </ul>

   <br>

   <h3>标签<span class="label label-default">new</span></h3>
   <h3>标签<span class="label label-primary">new</span></h3>
   <h3>标签<span class="label label-success">new</span></h3>
   <h3>标签<span class="label label-info">new</span></h3>
   <h3>标签<span class="label label-warning">new</span></h3>
   <h3>标签<span class="label label-danger">new</span></h3>

   <br>

   <a href="#">信息<span class="badge">10</span></a>

   <br>   <br>   <br>

   <button class="btn btn-success">提交<span class="badge">3</span></button>

   <br>
   <br>
   <ul class="nav nav-pills">
     <li class="active"><a href="">首页<span class="badge">2</span></a></li>
     <li class=""><a href="">资讯</a></li>
   </ul>
  <script src="js/jquery.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>

 

 

 

小贺学习笔记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap学习笔记——导航条、分页导航
gengfu_php的博客
10-05 3539
1 导航条导航条（navbar）比航（nav）复杂很多；导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。1.1 基础导航条1、在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”; 2、：在列表外部添加带有类“navbar”和“navbar-default”容器（div）。<div
Bootstrap v3 学习笔记 —— 组件
最新发布
cccloveforever的博客
04-06 867
Bootstrap 自带了大量可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
[学习笔记] bootstrap(六): nav导航栏和面包屑导航
这不是博客
01-03 4023
nav导航栏<nav role="navigation" class="navbar navbar-default"> <div class="container-fluid"></div> <div class="navbar-header"> <a href="#" class="navbar-brand"> 大大的logo </a> </div>
【整理】CSS3知识点4-分页
Rand Tsui
05-31 639
分页样式 http://www.runoob.com/css3/css3-pagination.html 1、=======================================================CSS 分页实例 简单分页 如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。 以下实例演示了如何使用 HTML 和 CSS 来创建分页：
bootstrap路径分页标签和徽章组件
涂涂
07-20 374
学习笔记 一．路径组件 路径组件也叫做面包屑导航。 //面包屑导航 首页 产品列表 韩版2015 年羊绒毛衣 效果： 二．分页组件 分页组件可以提供带有展示页面的功能。 //默认分页 « 1 2 3 4 5 » 效果： //首选项和禁用 1 2 //设置尺寸，四种lg、默认、sm 和xs //翻页效果
Bootstrap 学习笔记3 路径分页标签和徽章组件
weixin_30675247的博客
06-10 66
转载于:https://www.cnblogs.com/lixuchun/p/9165053.html
【Bootstrap学习笔记】4.输入框和导航组件、路径分页标签和徽章组件
sunraito的博客
08-16 236
八、输入框和导航组件 学习内容 输入框组件 导航组件 导航条组件 ● 输入框组件 在input元素前后加上文字或按钮，以实现对表单控件的扩展。 1.前(后)缀元素和输入框都需要放在class为.input-group的容器中 2.给前(后)缀元素增加样式.input-group-addon 3.可以将checkbox和radio作为前(后)缀元素，直接放在cla...
Bootstrap】学习笔记（四）——CSS组件
ZhShy
01-18 401
字体图标 使用字体图标： span：class=“glyphicon glyphicon-xxx” 下拉菜单 下拉菜单创建： div元素提那家dropdown类或dropup类 在div中嵌套一个button作为触发按钮，应用dropdown-toggle类及data-toggle="dropdown"的属性 button下添加ul列表，使用dropdown-menu类，添加aria-label...
第九章之路径分页标签与徽章组件
09-02
在本章中，我们将深入探讨四个关键组件：路径组件（面包屑导航）、分页组件、标签组件以及徽章组件。 一、路径组件，又称为面包屑导航，是一种展示用户在网站层级结构中的位置的辅助导航方式。例如： ```html ...
Bootstrap 第9章 路径分页标签和徽章组件
08-12
在第9章“路径分页标签和徽章组件”中，我们将深入探讨Bootstrap中的两种重要元素——分页和徽章，以及它们在实际项目中的应用。 分页是网页设计中常见的导航元素，尤其是在内容较多、需要分页展示的情况下。...
Bootstrap基本组件学习笔记之分页(12)
11-26
在本文中，我们将深入探讨Bootstrap中的一个关键组件——分页（Pagination）。分页通常用于处理大量的数据，使用户能够方便地浏览和导航长列表或内容。 0x01 默认的分页 Bootstrap的分页组件通过`<ul>`元素和`....
bootstrap table 列拖动
小贺的博客
09-05 9013
$("#exampleTable").colResizable({ liveDrag: true,//实时显示滑动位置 gripInnerHtml: "<div class='grip'></div>", //draggingClass: "dragging", postbackSafe: true,//刷新后保留之前的拖拽宽度 h...
Bootstrap FileInput参数方法
小贺的博客
10-13 4226
https://blog.csdn.net/Daniel_LiXuan/article/details/76066470 链接
bootstrap学习笔记——07——图标菜单按钮组件
小贺的博客
06-19 3312
小图标组件 Bootstrap提供了免费的263个小图标,具体可以参考中文官网的组件链接： http://v3.bootcss.com/components/#glyphicons 。部分图标如下： 部分图标 可以使用&lt;i&gt;或&lt;span&gt;标签来配合使用，具体如下： //使用小图标...
button 样式css总结
小贺的博客
05-26 2509
&lt;button class="btn btn-info"&gt;bootstrap&lt;/button&gt;   &lt;button class="btn btn-default"&gt;Button&lt;/button&gt; 
bootstrap学习笔记——02——排版样式
小贺的博客
05-25 728
页面排版 Bootstrap提供了一些常规设计好的页面排版的也是开发者使用。 页面主体 Bootstrap将全局font-size设置为14px，line-height行高设置为1.428（即20px）; &lt;p&gt;段落元素被设置等于1/2行高（即10px）； 颜色被设置为#333。 //创建包含段落突出的文本 &lt;p&gt;Bootstrap框...
bootstrap学习笔记——03——表格和按钮
小贺的博客
05-26 706
表格 准备（table&gt;thead&gt;tr&gt;th*4）快捷键Tab Bootstrap提供了一些丰富的表格样式供开发者使用。 基本格式 //实现基本的表格样式 &lt;table class="table"&gt; 条纹状表格 //让&lt;tbody&gt;里的行产生一行隔一行加单色背景效果 注：需要.table &lt;table class=...
bootstrap 截取时间为 日期
小贺的博客
07-24 552
formatter: function (value, row, index) { return value.substring(0,11); }
bootstrap学习笔记
05-28
以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值