Kandungan maklumat pembangunan responsif H5 (4)

Bar Halaman

Apabila membuat bar paging sebelum menggunakan Bootstrap, anda perlu mengubah suai nombor dan gaya bar paging secara manual Untuk laraskan bar paging, anda tidak lagi memerlukan penyahpepijatan yang membosankan.

Gunakan kaedah paging

pagination

Buat kotak div baharu di bahagian bawah lajur kiri

Gunakan kaedah penomboran

<div class="page">
    <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
</div>

QQ截图20161104092551.png

Dapatkan gaya seperti yang ditunjukkan dalam gambar, kami mengubah suai gaya untuk memaparkannya di tengah

.page{    text-align: center;}

QQ截图20161104092925.png

Meneruskan pembelajaran

fail baharu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
 <title>PHP中文网</title>
 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
 <style>
 body {
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida 
     Grande", sans-serif;
 }
 #myCarousel{
 margin: 50px 0 0 0;
 }
 .logo{
 padding: 0;
 }
 .daohang{
 margin-top: 0;
 }
 .carousel-inner img{
 margin: 0 auto;
 }
 .jumbotron{
 background-image: url(http://img.php.cn/upload/course/000/000/004/581af31542837558.jpg);
 margin: 50px 0 0;
 color: #ccc;
 }
 .jumbotron h1{
 font-size: 26px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX