1. 程式人生 > ><Bootstrap> 學習筆記二. 柵格系統的使用

<Bootstrap> 學習筆記二. 柵格系統的使用

boot pos nbsp title html thum row jquer bootstra

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">
    <script src="bootstrap/js/jquery-3.2.1.js"
></script> <script src="bootstrap/js/bootstrap.js"></script> </head> <body style="background: white;"> <!--柵格系統的使用--> <div class="container-fluid" style="background: white;"> <div class="row"> <div class="col-md-4 col-xs-6 col-sm-3">
<img src="1.png" alt="說明" class="img-thumbnail img-responsive"> <h3>RayLee</h3> <p>RayLee</p> </div> <div class="col-md-4 col-xs-6 col-sm-3"> <img src="1.png" alt="說明" class="img-thumbnail img-responsive"
> <h3>RayLee</h3> <p>RayLee</p> </div> <div class="col-md-4 col-xs-6 col-sm-3"> <img src="1.png" alt="說明" class="img-thumbnail img-responsive"> <h3>RayLee</h3> <p>RayLee</p> </div> </div> </div> </body> </html>

<Bootstrap> 學習筆記二. 柵格系統的使用