Menggunakan rangka kerja Bootstrap dalam ThinkPHP6-ThinkPHP-php.cn

Menggunakan rangka kerja Bootstrap dalam ThinkPHP6

WBOY

Lepaskan： 2023-06-20 13:51:14

asal

1319 orang telah melayarinya

Dengan pembangunan berterusan teknologi pembangunan web, semakin ramai pembangun menumpukan perhatian mereka kepada rangka kerja bahagian hadapan. Rangka kerja Bootstrap ialah rangka kerja sumber terbuka popular yang membantu pembangun membina antara muka web yang cantik dan responsif dengan cepat. Dalam artikel ini, kami akan memperkenalkan cara menggunakan rangka kerja Bootstrap dalam ThinkPHP6.

1. Gunakan Composer untuk memasang Bootstrap

Pertama, kita perlu menggunakan Composer untuk memasangnya. Dalam direktori aplikasi ThinkPHP6, jalankan arahan berikut:

komposer memerlukan twbs/bootstrap

Ini akan memasang rangka kerja Bootstrap dan semua kebergantungannya.

2. Perkenalkan fail Bootstrap

Untuk menggunakan Bootstrap dalam aplikasi kami, kami perlu memperkenalkan fail berkaitannya dalam fail paparan. Dalam ThinkPHP6, kita boleh menggunakan pemuat PHP untuk memperkenalkan fail ini.

Dalam fail susun atur awam kami (cth. layout.blade.php) kami boleh menambah yang berikut:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
    <link href="{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
</head>
<body>
@yield('content')
<script src="{{ asset('vendor/bootstrap/js/bootstrap.min.js') }}"></script>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini kami telah menambahkan fail CSS dan JS Bootstrap. Kami boleh merujuk fail dalam direktori pemasangan Komposer dengan memanggil fungsi aset.

3. Menggunakan gaya Bootstrap

Kini, kami boleh menggunakan gaya Bootstrap dalam aplikasi kami. Mari kita lihat contoh mudah. Kami akan mencipta fail paparan yang dipanggil index.blade.php:

@extends('layout')

@section('title')
    Home
@endsection

@section('content')
    <div class="container">
        <div class="jumbotron">
            <h1>Welcome to my site!</h1>
            <p class="lead">This is a simple example of how to use Bootstrap with ThinkPHP6.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more »</a></p>
        </div>
    </div>
@endsection

Salin selepas log masuk

Dalam contoh mudah ini, kami menggunakan kelas jumbotron dan btn Bootstrap. Kelas ini membantu kami mencipta halaman yang cantik tanpa menulis banyak CSS tersuai.

4. Gunakan komponen Bootstrap

Bootstrap juga menyediakan banyak komponen yang boleh membantu kami membina aplikasi web dengan cepat. Berikut ialah beberapa komponen biasa:

Borang: digunakan untuk mencipta pelbagai jenis elemen borang, seperti kotak teks, butang radio, butang berbilang pilih, kotak lungsur, dsb.
Bar Navigasi: Digunakan untuk mencipta bar navigasi responsif yang menyokong menu lungsur turun dan halaman.
Halaman tab: digunakan untuk memaparkan kandungan berbilang halaman Halaman boleh ditukar melalui jalur tab.
Kotak modal: digunakan untuk mencipta tetingkap timbul yang menyokong JavaScript.
Petua alat: Digunakan untuk membuat petua alat dan gesaan pop timbul.

Dalam ThinkPHP6, kita boleh menggunakan komponen ini dengan mudah. Mari kita lihat contoh borang:

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Salin selepas log masuk

Dalam contoh ini, kami menggunakan komponen borang Bootstrap, termasuk kotak teks, kotak lungsur, butang radio dan kotak semak.

Ringkasan

Dalam tutorial ini, kami memperkenalkan cara menambah rangka kerja Bootstrap dalam ThinkPHP6. Kami belajar cara mengimport fail Bootstrap, menggunakan gaya dan komponen untuk mencipta aplikasi web yang cantik. Jika anda memerlukan maklumat lanjut, lihat dokumentasi Bootstrap rasmi.

Atas ialah kandungan terperinci Menggunakan rangka kerja Bootstrap dalam ThinkPHP6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!