bootstrap如何實(shí)現(xiàn)網(wǎng)格系統(tǒng)

發(fā)布時間：2021-12-28 15:11:14 來源：億速云閱讀：133 作者：小新欄目：開發(fā)技術(shù)

小編給大家分享一下bootstrap如何實(shí)現(xiàn)網(wǎng)格系統(tǒng)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

示例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap10</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
</head>
<body>
<div class="container">
<h2>Hello, world!</h2>

<div class="row">
<div class="col-sm-3 col-md-6 col-lg-8" style="background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
           enim ad minim veniam, quis nostrud exercitation ullamco laboris 
           nisi ut aliquip ex ea commodo consequat. 
       </p>

       <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
           accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
           quae ab illo inventore veritatis et quasi architecto beatae vitae 
           dicta sunt explicabo. 
       </p>
</div>

<div class="col-sm-9 col-md-6 col-lg-4" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
           accusantium doloremque laudantium.
       </p>

       <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
           consectetur, adipisci velit, sed quia non numquam eius modi 
           tempora incidunt ut labore et dolore magnam aliquam quaerat 
           voluptatem. 
       </p>
         </div>
</div>
</div>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

以上是“bootstrap如何實(shí)現(xiàn)網(wǎng)格系統(tǒng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

bootstrap如何實(shí)現(xiàn)網(wǎng)格系統(tǒng)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽