Bootstrap面板學(xué)習(xí)使用

更新時(shí)間：2017年02月09日 08:29:38 作者：輕擾時(shí)光

這篇文章主要為大家詳細(xì)介紹了Bootstrap面板的學(xué)習(xí)使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Bootstrap面板的具體實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap</title>
  <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="ppanel panel-default"><!--panel是面板的意思-->
        <div class="panel-heading"><!--面板頭部區(qū)域-->
          <h3 class="panel-title">水果</h3><!--面板頭部區(qū)域標(biāo)題樣式-->
        </div>
        <div class="panel-body"><!--面板內(nèi)容區(qū)域-->
          <p>幾十塊的割發(fā)代首看定居地方時(shí)刻到了房間打開看電視的空間的空間看到</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="ppanel panel-primary"><!--還可以是success、warning、danger等-->
        <div class="panel-heading">
          <h3 class="panel-title">水果</h3>
        </div>
        <div class="panel-body">
          <p>幾十塊的割發(fā)代首看定居地方時(shí)刻到了房間打開看電視的空間的空間看到</p>
        </div>
      </div>
    </div>
  </div>
  <script src="js/jquery-2.1.0.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>

效果圖：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)動(dòng)態(tài)添加、刪除按鈕及input輸入框的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加、刪除按鈕及input輸入框的方法,涉及jQuery事件響應(yīng)及頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-04-04
支持移動(dòng)端原生js輪播圖
這篇文章主要介紹了支持移動(dòng)端原生js輪播圖的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
Javascript實(shí)現(xiàn)圖片懶加載的示例代碼
最近公司和第三方材料供應(yīng)商對(duì)接開發(fā)了物資集采平臺(tái),其中有個(gè)功能需求需要展示數(shù)百張材料信息圖片,有時(shí)頁面會(huì)出現(xiàn)卡頓的情況,并使用了圖片懶加載的方式進(jìn)行了優(yōu)化,下面把方法分享給大家一起學(xué)習(xí),感興趣的小伙伴跟著小編一起來看看吧
2024-12-12
JavaScript實(shí)現(xiàn)九宮格點(diǎn)擊變色效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)九宮格點(diǎn)擊變色效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
JavaScript?跳出iframe框架示例詳解
這篇文章主要為大家介紹了JavaScript跳出iframe框架示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-11-11
JavaScript錯(cuò)誤處理
這篇文章主要介紹了JavaScript錯(cuò)誤處理的相關(guān)資料,需要的朋友可以參考下
2015-02-02
深入理解JavaScript中的for循環(huán)
這篇文章主要給大家深入的介紹了JavaScript中的for循環(huán)，其中包括ES5中的三種for循環(huán)，分別是簡(jiǎn)單for循環(huán)、for-in以及forEach，另外還詳細(xì)介紹了ES6新增的一種循環(huán)：for-of ，有需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02
js實(shí)現(xiàn)四舍五入完全保留兩位小數(shù)的方法
這篇文章主要介紹了js實(shí)現(xiàn)四舍五入完全保留兩位小數(shù)的方法,涉及javascript針對(duì)浮點(diǎn)數(shù)的數(shù)值運(yùn)算相關(guān)技巧,需要的朋友可以參考下
2016-08-08
JavaScript中Hoisting詳解 (變量提升與函數(shù)聲明提升)
函數(shù)聲明和變量聲明總是被JavaScript解釋器隱式地提升(hoist)到包含他們的作用域的最頂端。下面這篇文章主要給大家介紹了關(guān)于JavaScript中Hoisting(變量提升與函數(shù)聲明提升)的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-08-08
JavaScript函數(shù)式編程(Functional Programming)箭頭函數(shù)(Arrow functions)
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)箭頭函數(shù)(Arrow functions)用法,結(jié)合實(shí)例形式分析了javascript函數(shù)式編程中箭頭函數(shù)相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2019-05-05