Bagaimana untuk menggunakan Bootstrap dalam pengaturcaraan PHP?

Dengan pembangunan berterusan teknologi Internet, rangka kerja bahagian hadapan semakin digunakan. Bootstrap ialah rangka kerja bahagian hadapan sumber terbuka yang menyediakan komponen CSS dan JavaScript yang kaya untuk membantu pembangun membina tapak web dan aplikasi web dengan cepat dengan reka letak responsif. Dalam pengaturcaraan PHP, menggunakan Bootstrap boleh meningkatkan pengalaman pengguna dan kebolehbacaan halaman Artikel ini akan memperkenalkan kaedah dan teknik tentang cara menggunakan Bootstrap dalam pengaturcaraan PHP.

1. Muat turun Bootstrap

Mula-mula, anda perlu memuat turun versi terbaharu Bootstrap daripada tapak web rasmi (https://getbootstrap.com). Secara amnya, kami akan memuat turun fail berpakej yang mengandungi fail CSS, JavaScript dan fon.

2. Perkenalkan fail Bootstrap

Selepas menyahzip fail yang dimuat turun, salin fail dalam folder CSS dan JavaScript ke direktori yang sepadan dalam projek tapak web anda. Perkenalkan fail CSS dan JavaScript Bootstrap ke dalam fail PHP:

<link rel="stylesheet" href="path/to/bootstrap.css">
<script src="path/to/bootstrap.js"></script>

Kemudian anda boleh menggunakan semua komponen dan gaya yang disediakan oleh Bootstrap dalam halaman.

3. Menggunakan komponen Bootstrap

Bootstrap menyediakan set komponen yang kaya yang boleh membantu pembangun membina tapak web dan aplikasi web dengan cepat. Berikut ialah beberapa komponen Bootstrap yang biasa digunakan:

(1) Bar navigasi

Bar navigasi ialah bahagian penting tapak web dan Bootstrap menyediakan banyak komponen bar navigasi. Berikut ialah bar navigasi asas:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

(2) Butang

Butang

ialah salah satu komponen penting yang disediakan oleh Bootstrap Anda boleh menggunakan kod berikut untuk mencipta butang:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

Butang boleh ditetapkan kepada warna dan saiz yang berbeza untuk memenuhi keperluan yang berbeza.

(3) Jadual

Menggunakan Bootstrap anda boleh mencipta jadual yang cantik dengan mudah. Berikut ialah kod untuk bentuk asas:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

(4) Borang

Bootstrap menyediakan banyak komponen borang Berikut ialah bentuk asas:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

4. Reka bentuk web responsif

Bootstrap juga menyediakan sokongan untuk reka bentuk web responsif. Pembangun boleh menggunakan sistem Grid Bootstrap untuk menetapkan susun atur halaman web. Berikut ialah contoh mudah:

<div class="container">
  <div class="row">
    <div class="col-sm-4">1 of 3</div>
    <div class="col-sm-4">2 of 3</div>
    <div class="col-sm-4">3 of 3</div>
  </div>
</div>

Dalam contoh di atas, halaman dibahagikan kepada tiga lajur dan apabila lebar skrin halaman web berubah, lebar tiga lajur ini akan melaraskan secara automatik.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan Bootstrap untuk mencipta tapak web dan aplikasi web yang cantik dalam pengaturcaraan PHP, termasuk memuat turun dan memperkenalkan fail Bootstrap, menggunakan komponen Bootstrap, reka bentuk web responsif, dsb. Sudah tentu, Bootstrap menyediakan banyak gaya dan komponen Saya harap pembangun dapat menggunakan sepenuhnya komponen ini dalam amalan, meningkatkan kecekapan pembangunan dan mencipta pengalaman yang lebih baik untuk pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Bootstrap dalam pengaturcaraan PHP?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!