今天學習中,在jsp代碼中剃盾,有這樣一句代碼:
<div class="breadcrumb">
您的當前位置:其他功能 > 練習測試
</div>
因為是菜鳥小白腺占,只能依靠百度了淤袜,查到以下內(nèi)容:
- 在菜鳥教程中----div
<div> 標簽定義 HTML 文檔中的一個分隔區(qū)塊或者一個區(qū)域部分。
<div>標簽常用于組合塊級元素衰伯,以便通過 CSS 來對這些元素進行格式化铡羡。
- 在DIVCSS5網(wǎng)站----class
在div、span意鲸、p標簽烦周、h1、h2等標簽中看見id和class使用怎顾,id和class是非常常用的標簽內(nèi)屬性读慎。
而現(xiàn)在代碼中有class的使用
id和class都可以在網(wǎng)頁中任何標簽內(nèi)使用。一般比較重要的部分槐雾、比較特別的盒子使用id夭委,而小局部不重要的或小結(jié)構(gòu)使用class。id調(diào)用css中以“#”井號命名的樣式選擇器募强,class調(diào)用css中以“.”英文半角小寫句號命名的樣式選擇器闰靴。
- breadcrumb----面包屑導航
Bootstrap 面包屑導航(Breadcrumbs) 面包屑導航(Breadcrumbs)是一種基于網(wǎng)站層次信息的顯示方式。以博客為例钻注,面包屑導航可以顯示發(fā)布日期蚂且、類別或標簽。它們表示當前頁面在導航層次結(jié)構(gòu)內(nèi)的位置幅恋。 Bootstrap 中的面包屑導航(Breadcrumbs)是一個簡單的帶有 .breadcrumb class 的無序列表杏死。分隔符會通過 CSS(bootstrap.min.css)中下面所示的 class 自動被添加:
.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}
下面的實例演示了面包屑導航:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 面包屑導航</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ol>
</body>
</html>
結(jié)果如下所示:
- Bootstrap簡介
Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML捆交、CSS淑翼、JAVASCRIPT 的。
Bootstrap教程: http://outofmemory.cn/bootstrap/tutorial/bootstrap-intro.html
中文文檔: https://v4.bootcss.com/docs/4.0/getting-started/introduction/