bootstrap学习9-路径分页和徽章组件

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <title>路径分页和徽章组件</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
<body style="margin:50px;">
    <!--
        breadcrumb :路径组件 面包屑导航
    -->
    <ul class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li><a href="#">产品列表</a></li>
        <li class="active"><a href="#">衣服</a></li>
    </ul>

    <!--
        agination 分页组件
        pagination-lg 大图标
        pagination-xs 小图标
        pagination-sm 超小图标
        pager 翻页效果
        previous  上一页对齐翻页效果
        next  下一页
        disabled 禁用
    -->
    <ul class="pagination pagination-sm">
        <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="#">&raquo;</a></li>
    </ul>

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

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

   <!--徽章

   -->
       <a href="#">信息<span class="badge">10</span></a>
       <button class="btn btn-warning">信息<span class="badge">10</span></button>
       <ul class="nav nav-pills">
           <li class="active">
               <a href="#">首页<span class="badge">10</span></a>
           </li>
           <li><a href="#">咨询</a></li>
       </ul>

    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
  </body>
</html>
时间: 2024-10-29 02:55:20

bootstrap学习9-路径分页和徽章组件的相关文章

BootStrap学习(4)_分页&amp;标签&amp;缩略图&amp;警告&amp;进度条

一.分页 分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页.  .pagination     --添加该 class 来在页面上显示分页. .disabled         --定义不可点击的链接 .active             --指示当前页面 .pagination-lg, .pagination-sm   --标签大小 .pager         --翻页 1.分页 <!DOCTYPE html> <html xmlns

MVC学习之数据分页:利用组件PagedList.Mvc

准备工作: 在项目的[管理NuGet程序包]中安装PagedList.Mvc组件. 安装好了截图让下: 具体实现 后台控制器代码: using Paging.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using PagedList; //一定要引入这个命名空间 using System.Data; namesp

第二百三十九节,Bootstrap路径分页标签和徽章组件

Bootstrap路径分页标签和徽章组件 学习要点: 1.路径组件 2.分页组件 3.标签组件 4.徽章组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:路径组件.分页组件.标签组件 和徽章组件. 一.路径组件 路径组件也叫做面包屑导航. 面包屑导航 breadcrumb样式class类,写在<ul>或<ol>里,设置面包屑导航(Bootstrap) <ol class="breadcrumb"> <li><a hr

第 9 章 路径分页标签和徽章组件

学习要点: 1.路径组件 2.分页组件 3.标签组件 4.徽章组件 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 的四个组件功能:路径组件.分页组件.标签组件和徽章组件. 一.路径组件 路径组件也叫做面包屑导航. //面包屑导航 <ol class="breadcrumb"> <li> <a href="#">首页</a> </li> <li> <a href="

Bootstrap学习-其它内置组件

1.缩略图(一) 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息.Bootstrap框架将这一部独立成一个模块组件.并通过"thumbnail"样式配合bootstrap的网格系统来实现.可以将产品列表页变得更好看. 使用方法: 通过"thumbnail"样式配合bootstrap的网格系统来实现. .col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 (≥768px

Bootstrap学习笔记(七)其它内置组件

缩略图(一) 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息.Bootstrap框架将这一部独立成一个模块组件.并通过"thumbnail"样式配合bootstrap的网格系统来实现.可以将产品列表页变得更好看. 源码文件: ?  LESS版本:对应文件thumbnails.less ?  Sass版本:对应文件_thumbnails.scss ? 编译后版本:bootstrap.css文件第4402行-第4426行 使用

BootStrap入门教程 (三) :可重用组件(按钮,导航,标签,徽章,排版,缩略图,提醒,进度条,杂项)

上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整的前端工具集,内建了大量的强大优雅可重用的组件,包括按钮(Button),导航(Navigation),标签(Labels),徽章(Badges),排版(Typography),缩略图( thumbnails),提醒(Alert),进度条(progress bar),杂项(Miscellaneous).

bootstrap学习记录(慕课网教程)

1.当主标题下需要副标题时可在h中嵌套small<h1>nihao<small>a</samll></h1> 2.当某一段落需要突出显示时可添加lead类,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理 class="lead" 3.在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗.在Bootstrap中,可以使用<b>和<strong>标签让文本直接加粗.

Bootstrap学习之列表组详解

列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件.本文将详细介绍Bootstrap列表组相关内容,一起来看看吧,希望对大家学习Bootstrap有所帮助. 基础列表组 基础列表组,看上去就是去掉了列表符号的列表项,并且配上一些特定的样式.在Bootstrap框架中的基础列表组主要包括两个部分: ?  list-group:列表组容器,常用的是ul元素,当然也可以是ol或者div元素 ?  list-group-item:列