Rumah > pembangunan bahagian belakang > tutorial php > Apakah operasi Bootstrap biasa dalam pengaturcaraan PHP?

Apakah operasi Bootstrap biasa dalam pengaturcaraan PHP?

WBOY
Lepaskan: 2023-06-12 10:58:01
asal
756 orang telah melayarinya

Bootstrap ialah perpustakaan bahagian hadapan untuk membangunkan reka bentuk web responsif. Ia menyediakan rangka kerja CSS dan JS yang matang, menjadikan pembangunan tapak web lebih mudah dan pantas. Untuk pengaturcara PHP, adalah sangat membantu untuk membiasakan diri dengan operasi Bootstrap. Jadi apakah operasi Bootstrap biasa dalam pengaturcaraan PHP? Mari kita bincangkan bersama.

  1. Memperkenalkan perpustakaan Bootstrap
    Untuk menggunakan Bootstrap dalam pengaturcaraan PHP, anda perlu memperkenalkan perpustakaan Bootstrap terlebih dahulu. Apabila menggunakan CDN untuk memuatkan fail perpustakaan Bootstrap, anda hanya perlu menambah kod berikut dalam pengepala Html:
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Salin selepas log masuk

Jika anda menggunakan fail sumber tempatan, anda boleh memuat turun fail ke projek dan menambahnya dalam pengepala Kod berikut:

<link rel="stylesheet" href="path/to/bootstrap.min.css">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
Salin selepas log masuk
  1. Menu Navigasi Bootstrap
    Dalam pembangunan web PHP, menu navigasi Bootstrap sering digunakan untuk mencipta dan memaparkan navigasi utama tapak web dengan pantas. Menu navigasi Bootstrap terdiri daripada berbilang tab, yang boleh dilaksanakan melalui kod berikut:
<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>
Salin selepas log masuk
  1. Jadual Bootstrap
    Bootstrap menyediakan pelbagai gaya dan susun atur jadual untuk pembangun pilih daripada. Gaya jadual yang sesuai dan cepat membina modul interaksi data yang kompleks. Berikut ialah sekeping kod yang menggunakan borang Bootstrap:
<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>
Salin selepas log masuk
  1. Borang Bootstrap
    Borang Bootstrap boleh memudahkan pembangun mencipta elemen borang dan melaksanakan pengesahan borang. Berikut ialah sekeping kod yang menggunakan borang Bootstrap:
<form>
    <div class="form-group">
        <label for="exampleInputName1">Name</label>
        <input type="text" class="form-control" id="exampleInputName1" placeholder="Enter name">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>
Salin selepas log masuk
  1. Bootstrap modal box
    Bootstrap modal box biasanya digunakan untuk memaparkan maklumat atau mendapatkan tindakan pengguna. Kita boleh menggunakan kod berikut untuk melaksanakan kotak modal Bootstrap asas:
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
Salin selepas log masuk

Di atas adalah operasi Bootstrap biasa dalam pengaturcaraan PHP. Memandangkan Bootstrap terus dikemas kini, kami juga boleh mempelajari penggunaan yang lebih maju untuk menyesuaikan diri dengan keperluan pembangunan yang berubah-ubah.

Atas ialah kandungan terperinci Apakah operasi Bootstrap biasa 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