<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>面板</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>面板</h1>
 </div>
 <div class="col-lg-3">
 <div class="panel panel-default">
 <div class="page-header">
 <h3>面板頭部</h3>
 </div>
 <div class="panel-body">
 <p>內容內容內容內容內容內容內容內容內容內容</p>
 </div>
 <div class="panel-footer">
 <p>面板尾部</p>
 </div>
 </div>
 </div>
 <div class="col-lg-3">
 <div class="panel panel-default">
 <div class="page-header">
 <h3>面板頭部</h3>
 </div>
 <div class="panel-body">
 <p>內容內容內容內容內容內容內容內容內容內容</p>
 </div>
 <div class="panel-footer">
 <p>面板尾部</p>
 </div>
 </div>
 </div>
 <div class="col-lg-3">
 <div class="panel panel-default">
 <div class="page-header">
 <h3>面板頭部</h3>
 </div>
 <div class="panel-body">
 <p>內容內容內容內容內容內容內容內容內容內容</p>
 </div>
 <div class="panel-footer">
 <p>面板尾部</p>
 </div>
 </div>
 </div>
 <div class="col-lg-3">
 <div class="panel panel-default">
 <div class="page-header">
 <h3>面板頭部</h3>
 </div>
 <div class="panel-body">
 <p>內容內容內容內容內容內容內容內容內容內容</p>
 </div>
 <div class="panel-footer">
 <p>面板尾部</p>
 </div>
 </div>
 </div>
</div>
</body>
</html>

效果如下：

如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：

Bootstrap學習教程

Bootstrap實戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JS實現(xiàn)數(shù)組內值累加常見的3個方法
這篇文章主要給大家介紹了關于JS實現(xiàn)數(shù)組內值累加常見的3個方法,文中通過實例代碼將3個方法介紹的非常詳細,對大家學習或者使用js具有一定參考借鑒價值,需要的朋友可以參考下
2023-07-07
快速實現(xiàn)JS圖片懶加載(可視區(qū)域加載)示例代碼
目前很多網(wǎng)站，在圖片加載時均采用了一種名為懶加載的方式，具體表現(xiàn)為，當頁面被請求時，只加載可視區(qū)域的圖片，其它部分的圖片則不加載，只有這些圖片出現(xiàn)在可視區(qū)域時才會動態(tài)加載這些圖片，下面本文就介紹了JS圖片懶加載(可視區(qū)域加載)的實現(xiàn)方法，一起來看看吧。
2017-01-01
詳解js數(shù)組的完全隨機排列算法
本文主要對常見的完全錯誤的隨機排列算法進行介紹分析，并介紹了經(jīng)典的隨機排列算法，具有很好的參考價值，需要的朋友一起來看下吧
2016-12-12
實例解析package.json和最常見的scripts字段
日常開發(fā)中，現(xiàn)在的前端開發(fā)已經(jīng)被三大框架取代，其中最主流的不過vue和react，而開發(fā)這些項目的時候不得不接觸package.json這個文件，可你真的了解這個文件嗎？今天給大家聊聊package.json和最常見的scripts字段，感興趣的朋友一起看看吧
2023-04-04
微信小程序可滑動周日歷組件使用詳解
這篇文章主要為大家詳細介紹了微信小程序可滑動周日歷組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
JS短信驗證碼倒計時功能的實現(xiàn)（沒有驗證碼，只有倒計時）
最近接了個項目，其中有這樣的需求：當用戶想要獲取驗證碼時，就點擊免費獲取驗證碼，然后開始倒計時，倒計時期間按鈕文字為剩余時間x秒，且不可按狀態(tài)，倒計時結束后，按鈕更改為點擊重新發(fā)送，下面給大家分享js短信驗證碼倒計時實現(xiàn)代碼
2016-10-10
微信小程序實現(xiàn)多圖上傳
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)多圖上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
判斷滾動條到底部的JS代碼
這篇文章介紹了判斷滾動條到底部的JS代碼，有需要的朋友可以參考一下
2013-11-11
JS解決iframe之間通信和自適應高度的問題
關于iframe之間的通信問題與自適應高度問題網(wǎng)上有很多，那么這篇文章小編也和大家一起來談談iframe之間通信問題及iframe自適應高度問題，有需要的可以參考借鑒。
2016-08-08
javascript實現(xiàn)電商放大鏡效果
這篇文章主要為大家詳細介紹了javascript實現(xiàn)電商放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-11-11