jQuery Bootstrap 列表是一種常用的Web開發(fā)工具,它能夠幫助我們快速制作出好看的列表。
首先,我們需要引入jQuery和Bootstrap庫:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
接下來,我們就可以開始制作列表了。
首先是無序列表,它的HTML代碼如下:
<ul class="list-group"> <li class="list-group-item">列表項(xiàng)1</li> <li class="list-group-item">列表項(xiàng)2</li> <li class="list-group-item">列表項(xiàng)3</li> </ul>
以上代碼可以制作出一個(gè)默認(rèn)樣式的無序列表,我們也可以加入一些其他的類來改變它的樣式。
接下來是有序列表,它的HTML代碼如下:
<ol class="list-group"> <li class="list-group-item">列表項(xiàng)1</li> <li class="list-group-item">列表項(xiàng)2</li> <li class="list-group-item">列表項(xiàng)3</li> </ol>
同樣,我們也可以加入其他類來改變有序列表的樣式。
在 jQuery Bootstrap 中我們還可以制作出帶縮略圖的列表,其HTML代碼如下:
<ul class="list-group"> <li class="list-group-item clearfix"> <img src="img/1.jpg" alt="" class="img-thumbnail float-left"> <a href="#" class="float-left ml-2">列表項(xiàng)1</a> </li> <li class="list-group-item clearfix"> <img src="img/2.jpg" alt="" class="img-thumbnail float-left"> <a href="#" class="float-left ml-2">列表項(xiàng)2</a> </li> <li class="list-group-item clearfix"> <img src="img/3.jpg" alt="" class="img-thumbnail float-left"> <a href="#" class="float-left ml-2">列表項(xiàng)3</a> </li> </ul>
以上代碼可以制作出一個(gè)帶有縮略圖的列表,也可以根據(jù)需要修改圖片的大小和位置等樣式。
以上就是 jQuery Bootstrap 列表的制作方法,我們可以通過新增類、修改列表項(xiàng)、加入樣式等方法來改變列表的樣式。