web啟蒙----面包屑剂府?

今天學習中,在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/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末品追,一起剝皮案震驚了整個濱河市玄括,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌肉瓦,老刑警劉巖遭京,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異泞莉,居然都是意外死亡哪雕,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門鲫趁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來斯嚎,“玉大人,你說我怎么就攤上這事”てВ” “怎么了糠惫?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長钉疫。 經(jīng)常有香客問我硼讽,道長,這世上最難降的妖魔是什么陌选? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任理郑,我火速辦了婚禮,結(jié)果婚禮上咨油,老公的妹妹穿的比我還像新娘您炉。我一直安慰自己,他們只是感情好役电,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布赚爵。 她就那樣靜靜地躺著,像睡著了一般法瑟。 火紅的嫁衣襯著肌膚如雪冀膝。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天霎挟,我揣著相機與錄音窝剖,去河邊找鬼。 笑死酥夭,一個胖子當著我的面吹牛赐纱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播熬北,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼疙描,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了讶隐?” 一聲冷哼從身側(cè)響起起胰,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎巫延,沒想到半個月后效五,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡烈评,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年火俄,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片讲冠。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖适瓦,靈堂內(nèi)的尸體忽然破棺而出竿开,到底是詐尸還是另有隱情谱仪,我是刑警寧澤,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布否彩,位于F島的核電站疯攒,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏列荔。R本人自食惡果不足惜敬尺,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望贴浙。 院中可真熱鬧砂吞,春花似錦、人聲如沸崎溃。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽袁串。三九已至概而,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間囱修,已是汗流浹背赎瑰。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留破镰,地道東北人餐曼。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像啤咽,于是被迫代替她去往敵國和親晋辆。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 第3章 探索Bootstrap組件 在這一章宇整,我們將開始使用Bootstrap的一些非常有用的HTML組件瓶佳。諸如按...
    海上名月閱讀 928評論 1 6
  • 第5章 菜單、按鈕及導航 一鳞青、下拉菜單 小伙伴們注意霸饲,在Bootstrap框架中的下拉菜單組件是一個獨立的組件,根...
    凜0_0閱讀 4,950評論 0 66
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理臂拓,服務(wù)發(fā)現(xiàn)厚脉,斷路器,智...
    卡卡羅2017閱讀 134,628評論 18 139
  • 這是2017年閱讀的第23本書,離150本還有127本,連續(xù)每日讀書第5天中捆。 2017年2月12日鸯匹,《生命,才是最...
    吞書獸小布閱讀 781評論 2 2
  • 忘了有多久沒有看到過這樣能讓人從開片一直笑著哭著感動到片尾的電影了。 在觀影中蟋滴,第一次落淚便是開片不久...
    諾小晴閱讀 177評論 0 0