Bina aplikasi web responsif menggunakan PHP dan Bootstrap-tutorial php-php.cn

Bina aplikasi web responsif menggunakan PHP dan Bootstrap

WBOY

Lepaskan： 2023-05-23 08:30:01

asal

1559 orang telah melayarinya

Dengan populariti Internet mudah alih, semakin ramai pengguna mula mengakses aplikasi web pada peranti mudah alih. Ini juga membawa cabaran baharu, iaitu cara menyediakan pengalaman pengguna yang baik untuk skrin dengan saiz dan resolusi yang berbeza. Untuk menyelesaikan masalah ini, reka letak responsif telah wujud. Artikel ini akan memperkenalkan cara menggunakan PHP dan Bootstrap untuk membina aplikasi web reka letak responsif.

1. Pengenalan kepada Bootstrap

Bootstrap ialah satu set rangka kerja sumber terbuka berdasarkan HTML, CSS dan JavaScript, yang direka untuk memudahkan proses pembangunan web. Ia menyediakan banyak kelas CSS dan pemalam JavaScript yang dipratentukan, yang boleh melaksanakan komponen web biasa dengan mudah seperti reka letak responsif, kawalan borang, bar navigasi dan kotak amaran. Bootstrap juga menyediakan fail CSS asas untuk menyesuaikan gaya dengan mudah.

2. Pengenalan kepada Reka Letak Responsif

Reka letak responsif ialah teknologi reka bentuk web yang boleh melaraskan reka letak dan gaya mengikut saiz dan resolusi skrin yang berbeza untuk memberikan pengalaman pengguna yang lebih baik. Susun atur responsif boleh dicapai melalui pertanyaan media. Pertanyaan media ialah teknologi CSS yang mentakrifkan gaya berbeza berdasarkan sifat peranti yang berbeza (seperti saiz skrin, resolusi, orientasi, dll.).

3. Bina aplikasi web reka letak responsif

Artikel ini akan memperkenalkan cara menggunakan PHP dan Bootstrap untuk membina aplikasi web reka letak responsif. Berikut ialah gambaran keseluruhan langkah:

1) Pasang Bootstrap

Pertama, kita perlu memperkenalkan Bootstrap ke dalam aplikasi web. Bootstrap boleh diperkenalkan melalui CDN atau muat turun tempatan. Berikut ialah contoh kod untuk memperkenalkan CDN:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <h1>Hello, Bootstrap!</h1>
</body>
</html>

Salin selepas log masuk

2) Buat susun atur grid responsif

Bootstrap menyediakan teknologi yang dipanggil sistem grid untuk mencapai reka letak responsif. Sistem grid terdiri daripada berbilang baris dan lajur, dengan reka letak ditentukan dengan menetapkan lebar dan mengimbangi setiap lajur. Berikut ialah contoh kod untuk mencipta sistem grid dengan dua lajur:

<div class="container">
    <div class="row">
        <div class="col-sm-6">Column 1</div>
        <div class="col-sm-6">Column 2</div>
    </div>
</div>

Salin selepas log masuk

Dalam kod di atas, .container mewakili bekas untuk kandungan, .row mewakili baris dan .col-sm-6 mewakili separuh penuh Lebar lajur. Dalam contoh ini, lebar dua lajur ialah sejumlah 12 unit, jadi setiap lajur adalah 6 unit lebar. Akhiran -sm menunjukkan peraturan untuk menggunakan lajur tersebut apabila membuat pemaparan pada peranti kecil (iaitu lebar skrin kurang daripada 576 piksel). Bootstrap juga menyediakan akhiran lain, seperti -md, -lg dan -xl, untuk menentukan reka letak grid pada saiz skrin yang berbeza.

3) Gunakan titik putus responsif

Bootstrap mentakrifkan satu set kelas CSS untuk menentukan gaya di bawah saiz skrin yang berbeza. Berikut ialah beberapa titik putus responsif yang biasa digunakan:

xs: Skrin ultra-kecil, kurang daripada 576px.
sm: Skrin kecil, lebih besar daripada atau sama dengan 576px.
md: Skrin sederhana, lebih besar daripada atau sama dengan 768px.
lg: Skrin besar, lebih besar daripada atau sama dengan 992px.
xl: Skrin lebih besar, lebih besar daripada atau sama dengan 1200px.

Berikut ialah contoh kod menggunakan titik putus responsif:

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3">Column 1</div>
        <div class="col-sm-6 col-md-4 col-lg-3">Column 2</div>
        <div class="col-sm-6 col-md-4 col-lg-3">Column 3</div>
        <div class="col-sm-6 col-md-4 col-lg-3">Column 4</div>
    </div>
</div>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan titik putus responsif untuk menentukan lebar lajur. Pada peranti kecil, setiap lajur adalah 6 unit lebar, tetapi pada peranti sederhana, setiap lajur adalah 4 unit lebar, dan pada peranti besar, setiap lajur adalah 3 unit lebar.

4) Gaya Bootstrap Tersuai

Bootstrap menyediakan banyak kelas CSS pratakrif untuk mencipta reka letak responsif dan komponen web biasa dengan mudah. Walau bagaimanapun, dalam beberapa kes, anda mungkin perlu menyesuaikan gaya untuk memenuhi keperluan tertentu. Bootstrap menyediakan satu set pembolehubah dan MIXIN untuk membantu anda menyesuaikan gaya.

Berikut ialah contoh kod untuk menyesuaikan gaya Bootstrap:

// 定义一个自定义变量
$primary-color: #007bff;

// 定义一个自定义MIXIN
@mixin box-shadow($shadow) {
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
}

// 自定义样式
.btn-primary {
    background-color: $primary-color;
    color: #fff;

    // 使用自定义MIXIN
    @include box-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

Salin selepas log masuk

Dalam contoh ini, kami telah menentukan pembolehubah bernama $primary-color dan MIXIN bernama box-shadow() . Kami kemudian menggunakan pembolehubah tersuai dan MIXIN untuk menentukan warna latar belakang, warna teks dan bayang butang .btn-primary.

4. Ringkasan

Artikel ini memperkenalkan cara menggunakan PHP dan Bootstrap untuk membina aplikasi web reka letak responsif. Menggunakan sistem grid responsif Bootstrap, titik putus responsif dan gaya tersuai menyediakan cara yang cekap dan fleksibel untuk mencipta aplikasi web yang menyesuaikan diri dengan saiz dan resolusi skrin yang berbeza.

Atas ialah kandungan terperinci Bina aplikasi web responsif menggunakan PHP dan Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!