Bagaimana untuk menggunakan Bootstrap dalam pengaturcaraan PHP?

王林
Lepaskan: 2023-06-12 09:08:01
asal
1734 orang telah melayarinya

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.

  1. 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>
Salin selepas log masuk

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

  1. 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>
Salin selepas log masuk

(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>
Salin selepas log masuk

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>
Salin selepas log masuk

(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>
Salin selepas log masuk
  1. 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>
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan