AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

Bootstrap CSS组件之面包屑导航(breadcrumb)

51自学网 http://www.wanshiok.com
BootStrap,CSS组件,面包屑导航

面包屑breadcrumb一般用于导航,表示当前页面所在的位置
面包屑可以设置其他相关的小标记内容,比如标签、徽章标记等。

//源码//基础样式.breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px;}//所有li项都是内联块方式.breadcrumb > li { display: inline-block;}//并且li项才起作用.breadcrumb > li + li:before { padding: 0 5px; color: #ccc; content: "//00a0";}//设置当前项的颜色.breadcrumb > .active { color: #777;}
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Bootstrap从3.0版本开始全面支持移动平台,贯彻移动先行宗旨 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <ul class="breadcrumb">  <li>HTML</li>  <li>JS</li>  <li>CSS</li> </ul> <!-- bootstrap是基于jQuery--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </body></html>

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


BootStrap,CSS组件,面包屑导航  
上一篇:Bootstrap CSS组件之导航(nav)  下一篇:Bootstrap CSS组件之分页(pagination)和翻页(pager)