快捷導(dǎo)航

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

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

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

本文實例為大家分享了Bootstrap面板的具體實現(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ū)域標題樣式-->
        </div>
        <div class="panel-body"><!--面板內(nèi)容區(qū)域-->
          <p>幾十塊的割發(fā)代首看定居地方時刻到了房間打開看電視的空間的空間看到</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ā)代首看定居地方時刻到了房間打開看電視的空間的空間看到</p>
        </div>
      </div>
    </div>
  </div>
  <script src="js/jquery-2.1.0.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>

效果圖：

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

您可能感興趣的文章:

相關(guān)文章

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