Tutorial Bootstrap


tutorial bootstrap 4


Tali kasut adalah kerangka depan yang membantu anda membina laman web responsif mudah alih dengan lebih cepat dan mudah. Pertama kali dikembangkan oleh Twitter, Bootstrap kini digunakan untuk apa sahaja dari mengembangkan aplikasi web hingga tema WordPress. Ia juga percuma, serba boleh, dan intuitif.

Dengan Bootstrap, anda dapat menyusun laman web yang kompleks dari HTML standard dan menyesuaikannya dengan keperluan anda. Bootstrap juga dilengkapi dengan sejumlah plugin jQuery yang dapat memberikan fungsi tambahan seperti karusel, butang, petua alat, dan banyak lagi.

Yang terakhir, tetapi tidak kurang pentingnya, ini memberi anda banyak jalan pintas untuk membuat laman web yang akan menjimatkan masa dan tenaga anda. Yang anda perlukan hanyalah pemahaman asas HTML dan CSS untuk menghasilkan yang responsif, mudah alih, dan serasi dengan semua penyemak imbas moden.

P.S. Bootstrap bukanlah pilihan yang tepat untuk pemula yang lengkap. Sebilangan pengetahuan HTML dan CSS akan sangat membantu. Sebagai alternatif, anda boleh menggunakan pembangun laman web atau WordPress untuk membuat laman web.

Cara membuat laman web menggunakan Bootstrap (jadual kandungan):

  1. Langkah 1: Persediaan dan gambaran keseluruhan
    1. Buat halaman HTML
    2. Muatkan Bootstrap melalui CDN atau hoskannya secara tempatan
    3. Sertakan jQuery
    4. Muatkan JavaScript Bootstrap
    5. Satukan semuanya
  2. Langkah 2: Reka halaman pendaratan anda
    1. Tambahkan bar navigasi
    2. Sertakan CSS tersuai
    3. Buat bekas kandungan halaman
    4. Tambahkan gambar latar dan JavaScript tersuai
    5. Tambahkan Hamparan
    6. Sertakan tajuk halaman dan teks badan
    7. Buat butang CTA
    8. Sediakan bahagian tiga lajur
    9. Tambahkan borang kenalan
    10. Buat footer dua lajur
    11. Tambahkan pertanyaan media
    12. Dapatkan laman web anda secara langsung

Jumlah masa untuk membuat laman web menggunakan Bootstrap: 3-4 jam.
Tahap kemahiran: Permulaan hingga Pertengahan

Langkah 1: Persediaan dan gambaran keseluruhan


Untuk menggunakan Bootstrap, pertama-tama anda perlu mengintegrasikannya ke dalam persekitaran pengembangan anda, alias laman web. Untuk itu, anda mempunyai dua kemungkinan berbeza: memuatkannya dari jauh atau memuat turun dan menggunakan Bootstrap secara tempatan. Walau bagaimanapun, untuk kedua-duanya, pertama sekali anda memerlukan sesuatu untuk memuatkannya.,

1. Buat halaman HTML

Sebagai langkah pertama, kami akan membuat templat HTML ringkas sebagai asas di mana kami akan menggunakan Bootstrap. Untuk itu, perkara pertama yang anda ingin lakukan ialah membuat folder di komputer atau pelayan anda untuk fail projek. Dalam kes ini, saya akan memanggilnya tali but. Di sini, buat fail teks baru dan namakannya indeks.html. Buka dengan editor teks pilihan anda (mis. Notepad++dan kemudian tampal kod di bawah ke dalamnya.





Halaman Contoh Tutorial Bootstrap








Jangan lupa menyimpan fail anda sebelum meneruskan!

2a. Muatkan Bootstrap melalui CDN

Seperti yang telah dijelaskan, Bootstrap terdiri terutamanya dari helaian gaya dan skrip. Oleh itu, ia boleh dimuat di tajuk dan halaman bawah laman web anda seperti aset lain seperti fon tersuai. Kerangka ini menawarkan jalan masuk CDN (rangkaian penghantaran kandungan) untuk itu. Anda boleh mendapatkannya di Halaman muat turun Bootstrap, lebih jauh di bawah.

Untuk memasukkan Bootstrap ke halaman anda, cukup masukkan kod di bawah ke dalam bahagian templat anda.

Apabila anda sekarang menyimpan fail, penyemak imbas yang membukanya akan memuatkan aset Bootstrap secara automatik.

Menggunakan kaedah jauh adalah idea yang baik kerana banyak pengguna sudah mempunyai kerangka kerja dalam cache penyemak imbas mereka. Sekiranya demikian, mereka tidak perlu memuatkannya semula ketika datang ke laman web anda, sehingga masa pemuatan halaman lebih cepat. Akibatnya, ini adalah kaedah yang disyorkan untuk laman web langsung.

Walau bagaimanapun, untuk percubaan dan pengembangan, atau jika anda ingin bebas dari sambungan Internet, anda juga boleh mendapatkan salinan Bootstrap anda sendiri. Inilah yang saya lakukan untuk tutorial ini kerana ia juga menghasilkan kurang kod untuk diposkan.

2b. Hos Bootstrap secara tempatan

Cara alternatif untuk menyiapkan Bootstrap adalah dengan memuat turunnya ke cakera keras anda dan menggunakan fail secara tempatan. Anda mendapat pilihan muat turun di tempat yang sama dengan pautan ke versi jauh. Di sini, pastikan anda mendapatkan fail CSS dan JS yang disusun. Anda tidak memerlukan fail sumber.

Setelah anda melakukannya, buka zip fail dan salin kandungannya ke direktori yang sama seperti indeks.html. Selepas itu, anda boleh memuatkan Bootstrap CSS ke dalam projek anda seperti ini:

Anda akan melihat bahawa ini termasuk jalan fail untuk mencari fail Bootstrap. Dalam kes anda, pastikan jalan anda sesuai dengan persediaan sebenar anda. Contohnya, nama direktori mungkin berbeza jika anda memuat turun versi Bootstrap yang berbeza.

3. Sertakan jQuery

Untuk mendapatkan fungsi Bootstrap sepenuhnya, anda juga perlu memuatkan pustaka jQuery. Di sini juga, anda mungkin mempunyai kemungkinan untuk memuatnya dari jauh atau menghoskannya secara tempatan.

Dalam kes pertama, anda dapati pautan ke jQuery versi terbaru di sini. Anda boleh menggunakannya untuk memuatkan pustaka ke halaman anda dengan meletakkan garis kod di bawah tepat di tempat yang dinyatakan di halaman anda.

Sebagai alternatif, muat turun jQuery (klik kanan> Simpan link sebagai…), unzip, dan masukkan ke dalam folder projek. Kemudian, sertakan di tempat yang sama dengan fail anda dengan cara ini:

Sekali lagi, pastikan jalan sesuai dengan persediaan anda.

4. Muatkan JavaScript Bootstrap

Langkah terakhir dalam menyiapkan Bootstrap adalah memuat pustaka JavaScript Bootstrap. Ini termasuk dalam versi rangka kerja yang dimuat turun dan anda juga menemui pautan ke sumber terpencil di tempat yang sama dengan sebelumnya. Walau bagaimanapun, kami akan memuatkannya di tempat yang berbeza daripada helaian gaya. Daripada header, ia masuk ke footer halaman, tepat selepas panggilan untuk jQuery.

Anda boleh memanggilnya dari jauh seperti ini:

Atau seperti tempatan:

5. Satukan semuanya

Sekiranya anda mengikuti langkah-langkah di atas dengan betul, anda harus menggunakan fail yang kelihatan seperti ini untuk penyelesaian jauh:

   Halaman Contoh Tutorial Bootstrap         

Sebagai alternatif, jika anda menghoskan secara tempatan, templat halaman anda harus menyerupai kod di bawah:

   Halaman Contoh Tutorial Bootstrap         

Sekiranya itu yang anda miliki dan anda menyimpan pekerjaan anda, anda kini sudah bersedia untuk melangkah ke langkah seterusnya.

Langkah 2: Reka halaman pendaratan anda


Baiklah, memang banyak kerja persiapan. Namun, ia tidak terlalu sukar, bukan? Tambahan lagi, kini keseronokan bermula.

Pada masa ini, semasa anda menavigasi ke laman web sampel anda, anda hanya perlu melihat halaman kosong. Masa untuk mengubahnya.

1. Tambahkan bar navigasi

Perkara pertama yang ingin kita lakukan ialah menambahkan bar navigasi ke bahagian atas halaman. Ini membolehkan pelawat anda mengelilingi laman web anda dan menemui seluruh halaman anda.

Untuk itu, kami akan menggunakan navbar kelas. Ini adalah salah satu daripada unsur lalai dari Bootstrap. Ini membuat elemen navigasi yang responsif secara lalai dan secara automatik akan runtuh pada skrin yang lebih kecil. Ia juga menawarkan sokongan bawaan untuk menambahkan penjenamaan, skema warna, jarak, dan komponen lain.

Kami akan menggunakannya seperti di bawah dan menghantarnya tepat di bawah teg:

 Logo   

Beberapa penjelasan mengenai kod:

  • navbar-berkembang-md – Ini menunjukkan pada titik mana bar navigasi mengembang dari ikon menegak atau hamburger ke bar mendatar bersaiz penuh. Dalam kes ini, kami telah menetapkannya ke skrin sederhana, yang, di Bootstrap, lebih besar daripada 768 piksel.
  • jenama navbar – Ini digunakan untuk penjenamaan laman web anda. Anda juga boleh memasukkan fail gambar logo di sini.
  • navbar-toggler – Menunjukkan butang togol untuk menu yang diciutkan. Sekeping data-toggle = "runtuh" mentakrifkan bahawa ini akan beralih ke menu hamburger, bukan drop-down, yang merupakan pilihan lain. Penting untuk anda menentukan a sasaran data dengan id CSS (ditakrifkan oleh #) dan balut a div dengan nama yang sama di sekitar yang sebenarnya navbar unsur.
  • ikon navbar-toggler – Seperti yang anda dapat meneka, ini akan membuat ikon yang diklik pengguna untuk membuka menu pada skrin yang lebih kecil.
  • navbar-nav – Kelas untuk
      elemen senarai yang menyimpan item menu. Yang terakhir dilambangkan dengan item nav dan pautan nav.

    Mengapa saya menerangkan perkara ini begitu banyak?

    Kerana itu adalah titik Bootstrap. Anda mempunyai semua standard ini yang membolehkan anda membuat elemen dengan beberapa kelas HTML dan CSS dengan cepat. Anda tidak perlu menulis CSS apa pun untuk memberikan gaya, semuanya sudah disiapkan dalam Bootstrap. Tambahan lagi, semuanya bergerak pantas di luar kotak! Adakah anda mula melihat betapa bermanfaatnya ini?

    Perkara di atas cukup untuk menambahkan bar navigasi ke laman web anda. Namun, pada masa ini, ia masih kelihatan sangat sedikit.

    tutorial bootstrap menambah bar navigasi

    Itu kerana tidak banyak gaya yang melekat padanya. Walaupun anda dapat menambah warna lalai (sebagai contoh, dengan memberi kelas seperti pada navbar bg-gelap navbar-gelap), sebaliknya kita mahu menambah sendiri.

    2. Sertakan CSS tersuai

    Nasib baik, jika anda ingin mengubah gaya lalai, anda tidak perlu melayari perpustakaan besar kepingan gaya dan membuat perubahan dengan tangan. Sebaliknya, seperti tema kanak-kanak WordPress, anda dapat menambahkan fail CSS anda sendiri yang boleh anda gunakan untuk menimpa gaya yang ada.

    Untuk itu, cukup buat fail kosong dengan editor teks anda dan namakannya utama.css. Simpan, kemudian tambahkan ke bahagian kepala laman web Bootstrap anda seperti ini:

    Ini adalah kod untuk helaian gaya yang terdapat di direktori utama. Sekiranya anda memutuskan untuk meletakkan bahagian dalam css folder, pastikan untuk memasukkan jalan yang betul dalam pautan.

    Dari sini, anda dapat menambahkan CSS tersuai ke laman web anda. Sebagai contoh, untuk menggayakan bar navigasi dan elemennya, anda boleh menggunakan markup seperti ini:

    badan { pembalut: 0; margin: 0; latar belakang: # f2f6e9; } /*--- bar navigasi ---*/ .navbar { latar belakang: # 6ab446; } .pautan nav, .jenama navbar { warna: #fff; kursor: penunjuk; } .pautan nav { margin-right: 1em! penting; } .pautan nav: arahkan { warna: # 000; } .navbar-runtuh { justify-content: flex-end; }

    Dan inilah hasilnya:

    bar navigasi gaya tutorial bootstrap

    Nampak lebih baik dari sebelumnya, bukan??

    3. Buat bekas kandungan halaman

    Selepas bar navigasi, perkara seterusnya yang anda mahukan adalah bekas untuk kandungan halaman. Ini sangat mudah di Bootstrap kerana semua yang anda perlukan adalah ini di bawah tag navbar:

    Perhatikan bekas-cecair kelas. Ini adalah salah satu kelas Bootstrap lalai. Memohonnya ke div elemen secara automatik menggunakan sekumpulan CSS kepadanya.

    The -cecair bahagian memastikan bekas meregangkan di seluruh lebar skrin. Terdapat juga bekas, yang mempunyai lebar tetap di atasnya, sehingga akan selalu ada ruang di kedua sisi layar.

    Walau bagaimanapun, jika anda memuatkan semula halaman, anda masih tidak akan melihat apa-apa (melainkan anda menggunakan alat pembangun). Itu kerana anda hanya membuat elemen HTML kosong. Ini akan mula berubah sekarang.

    4. Tambahkan gambar latar dan JavaScript tersuai

    Sebagai langkah seterusnya dalam tutorial Bootstrap ini, kami ingin memasukkan gambar latar layar penuh untuk tajuk halaman arahan kami. Untuk itu, kita harus menggunakan beberapa jQuery untuk menjadikan gambar meregangkan sepanjang skrin.

    Anda melakukannya dengan cara yang sama seperti memasukkan CSS tersuai. Pertama, buat fail teks namanya utama.js dan letakkan di dalam folder laman web anda. Kemudian, panggilnya sebelum penutup tag di dalam indeks.html.

    Selepas itu, anda boleh menyalin dan menampal kod ini untuk membuat

    elemen meregangkan ke seluruh skrin:
    $ (dokumen). sudah (fungsi () { $ ('. header'). tinggi ($ (tetingkap). tinggi ()); })

    Kemudian, satu-satunya perkara yang tinggal ialah menetapkan gambar latar. Anda boleh melakukan ini seperti di dalam utama.css:

    .kepala { background-image: url ('gambar / tajuk-latar.jpg'); latar belakang: penutup; latar belakang-kedudukan: tengah; kedudukan: saudara; }

    Sekiranya anda meletakkan gambar dengan ukuran yang cukup di lokasi yang ditentukan oleh jalan di atas, anda akan memperoleh hasil yang serupa dengan ini:

    tutorial bootstrap merangkumi gambar latar header

    5. Tambahkan Overlay

    Untuk menjadikan gambar latar lebih bergaya, kami juga akan menambah lapisan. Untuk itu, anda akan membuat elemen div lain di dalam elemen yang baru anda sertakan sebelumnya.

    Kemudian, anda boleh menambahkan yang berikut dalam fail CSS tersuai anda:

    .tindanan { kedudukan: mutlak; ketinggian min: 100%; lebar minimum: 100%; kiri: 0; atas: 0; latar belakang: rgba (0, 0, 0, 0.6); }

    Ini akan mewujudkan hamparan yang bagus untuk gambar yang anda masukkan lebih awal:

    tutorial bootstrap menambah tindanan

    6. Sertakan tajuk halaman dan teks badan

    Sekarang anda mungkin mahu menambahkan tajuk halaman dalam bentuk tajuk ditambah dengan beberapa teks badan. Dengan cara itu, pelawat anda akan mengetahui dengan segera laman web mana mereka berada dan apa yang dapat mereka harapkan darinya.

    Untuk membuatnya, cukup tambahkan coretan ini di dalam bekas yang anda sediakan pada langkah terakhir, di bawah tindanan:

    Selamat Datang ke Halaman Pendaratan!

    Lorem ipsum dolor duduk amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, dalam pharetra sem ullamcorper.

    Selepas itu, tambahkan markup berikut ke utama.css.

    .keterangan { kiri: 50%; kedudukan: mutlak; atas: 45%; ubah: terjemahkan (-50%, -55%); text-align: tengah; } .keterangan h1 { warna: # 6ab446; } .keterangan p { warna: #fff; saiz fon: 1.3rem; ketinggian garisan: 1.5; }

    Apabila anda melakukannya, halaman arahan sekarang kelihatan seperti ini:

    tutorial bootstrap tambah tajuk dan keterangan halaman

    Ia benar-benar mula bersatu, bukan?

    7. Buat butang CTA

    Tidak ada halaman arahan yang lengkap tanpa ajakan bertindak, paling sering dalam bentuk butang. Oleh sebab itu, kami tidak akan menyertakan cara membuatnya dalam tutorial Bootstrap ini.

    Kerangka ini menawarkan banyak alat untuk membuat butang dengan cepat dan mudah. Anda boleh mendapatkan banyak contoh di sini. Dalam kes saya, saya menambah markup berikut tepat di bawah kandungan halaman di dalam bekas:

    Selain itu, saya menambah CSS ini ke utama.css:

    .butang keterangan { sempadan: 1px pepejal # 6ab446; latar belakang: # 6ab446; sempadan-jejari: 0; warna: #fff; } .butang keterangan: arahkan { sempadan: 1px pepejal #fff; latar belakang: #fff; warna: # 000; }

    Setelah menyimpan dan memuat semula, ia kelihatan seperti ini:

    tutorial bootstrap menambah butang seruan untuk bertindak

    8. Sediakan bahagian tiga lajur

    Saya sudah cukup berpuas hati dengan bagaimana keadaan sedang berkembang. Namun, kami belum selesai dengan halaman tersebut. Seterusnya, kami ingin membuat tiga lajur di bawah kandungan utama untuk maklumat tambahan. Ini adalah keistimewaan Bootstrap kerana ia memainkan kekuatannya: membuat grid. Inilah cara untuk melakukannya dalam kes ini:

    Lorem ipsum

    Lorem ipsum dolor duduk amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum

    Lorem ipsum dolor duduk amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Perkara pertama yang anda akan perhatikan adalah barisan unsur. Anda memerlukannya setiap kali membuat lajur untuk bertindak sebagai wadah untuk grid.

    Bagi lajur, mereka semua mempunyai beberapa kelas: col-lg-4, col-md-4 dan col-sm-12. Ini menunjukkan bahawa kita berurusan dengan lajur dan ukurannya pada layar yang berbeza.

    Untuk memahami perkara ini, anda perlu tahu bahawa dalam grid Bootstrap, semua lajur dalam satu baris selalu menambah nombor 12. Oleh itu, memberi mereka kelas di atas bermaksud bahawa mereka akan mengambil satu pertiga dari skrin pada besar dan sederhana skrin (12 dibahagi dengan 3 adalah 4) tetapi keseluruhan skrin pada peranti kecil (12 dari 12 lajur).

    Ia masuk akal, bukan?

    Anda juga akan melihat bahawa saya memasukkan gambar dan menambahkannya .cecair-gambar kelas kepada mereka. Ini untuk membuat mereka responsif sehingga mereka berskala dengan layar yang dilihat halaman.

    Selain itu, anda mempunyai gaya berikut di tempat biasa:

    .ciri-ciri { margin: auto 4em; pembalut: 1em; kedudukan: saudara; } .ciri-tajuk { warna: # 333; saiz fon: 1.3rem; berat huruf: 700; margin-bottom: 20 piksel; text-transform: huruf besar; } .ciri img { -webkit-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4); -moz-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4); kotak-bayangan: 1px 1px 4px rgba (0, 0, 0, 0.4); margin-bottom: 16px; }

    Apabila ditambahkan di bawah kandungan utama dan disimpan, kelihatan seperti ini:

    tutorial bootstrap menambah bahagian tiga lajur

    9. Tambahkan borang kenalan

    Anda akan melihat bahawa salah satu bidang baru masih kosong. Ini sengaja kerana kami ingin menambahkan borang kenalan kepadanya. Ini adalah amalan yang sangat biasa untuk halaman pendaratan untuk membolehkan pengunjung menghubungi.

    Membuat borang hubungan di Bootstrap agak mudah:

    Hubungi!

    Sekarang, saya tidak perlu lagi menjelaskan markup untuk membuat lajur lagi. Inilah maksud markup selebihnya:

    • bentuk-kumpulan – Digunakan untuk membungkus medan borang untuk pemformatan.
    • kawalan bentuk – Menunjukkan medan bentuk seperti input, kawasan teks dll.

    Terdapat banyak lagi yang boleh anda lakukan dengan borang, yang boleh anda ketahui di dokumentasi. Namun, untuk tujuan demonstrasi, perkara di atas sudah cukup. Letakkannya di dalam ruangan kosong yang tersisa dan kemudian masukkan gaya ini utama.css:

    .ciri .kawal-kawalan, .input ciri { sempadan-jejari: 0; } .ciri .btn { warna latar: # 589b37; sempadan: 1px pepejal # 589b37; warna: #fff; margin atas: 20 piksel; } .ciri .btn: hover { warna latar: # 333; sempadan: 1px pepejal # 333; }

    Apabila anda melakukannya, anda mendapat borang seperti ini:

    tutorial bootstrap merangkumi borang hubungan

    10. Buat footer dua lajur

    Baiklah, kita sekarang menjelang akhir tutorial Bootstrap. Perkara terakhir yang ingin anda tambahkan ke halaman arahan anda ialah bahagian footer dengan dua lajur. Sekarang, ini tidak lagi menimbulkan masalah kepada anda.

    Maklumat tambahan

    Lorem ipsum dolor duduk amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum dolor duduk amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Hubungi

    1640 Riverside Drive, Hill Valley, California
    [dilindungi e-mel]
    + 01 234 567 88
    + 01 234 567 89

    Selain penanda grid biasa, bahagian ini menyoroti beberapa kemungkinan untuk mengubah tipografi dengan Bootstrap:

    • huruf besar-teks
    • huruf-berat-tebal
    • pusat teks

    Ia mesti jelas dari nama kelas yang mereka lakukan. Anda boleh mendapatkan lebih banyak maklumat mengenai Bootstrap dan tipografi di sini.

    Selain perkara di atas, anda boleh menggunakan gaya seperti ini:

    .pengaki halaman { warna latar: # 222; warna: #ccc; padding: 60px 0 30px; } .hak cipta footer { warna: # 666; pembalut: 40px 0; }

    Ini menghasilkan footer cantik yang kelihatan seperti:

    tutorial bootstrap merangkumi footer halaman

    11. Tambahkan pertanyaan media

    Halaman pada dasarnya sudah siap sekarang. Ia juga bertanggungjawab sepenuhnya. Walau bagaimanapun, dalam paparan mudah alih penyemak imbas, bahagian atas belum keluar dengan betul.

    ralat tutorial bootstrap pada reka bentuk mudah alih

    Namun, jangan risau, anda boleh membetulkannya dengan mudah dengan pertanyaan media yang mudah. Kecuali anda menggunakan SASS untuk menyusun laman Bootstrap anda, ini berfungsi dengan cara yang sama seperti dalam keadaan lain. Anda hanya perlu ingat titik kerosakan yang telah ditetapkan termasuk dalam Bootstrap.

    Akibatnya, untuk membetulkan masalah di atas, anda boleh memasukkan sekeping kod seperti ini:

    @media (lebar maksimum: 575.98 piksel) { .keterangan { kiri: 0; pembalut: 0 15 piksel; kedudukan: mutlak; 10 teratas%; ubah: tiada; text-align: tengah; } .keterangan h1 { saiz fon: 2em; } .keterangan p { saiz fon: 1.2rem; } .ciri-ciri { margin: 0; } }

    Selepas itu, semuanya seperti mestinya:

    tutorial bootstrap menambah pertanyaan media

    12. Muat naik Laman Web Anda ke Host Web

    Sekiranya anda mengikuti, sekarang anda harus disiapkan dengan laman web yang sudah siap dan juga mudah alih dan responsif sepenuhnya.

    Namun, setakat ini, tiada siapa selain anda yang dapat melihatnya. Untuk mengubahnya, anda memerlukan hos dan domain web. Dengan cara itu, orang boleh memasukkan alamat laman web anda ke bar penyemak imbas mereka dan kemudian mengakses laman web Bootstrap anda yang baru dicetak secara dalam talian.

    Untuk membolehkan mereka melakukannya, anda perlu memuat naik laman web ke pelayan anda. Anda boleh melakukannya dengan klien FTP seperti FailZilla. Kumpulkan alamat host FTP, nama pengguna, dan kata laluan anda dari penyedia hosting anda untuk menyambung ke pelayan anda dari jauh. Apabila anda melakukannya, anda seharusnya dapat melihat fail dan direktori yang ada di sana.

    memuat naik laman web bootstrap ke pelayan melalui ftp

    Navigasi ke direktori yang ditunjukkan oleh domain anda (biasanya direktori root). Sebaik sahaja anda melakukannya, cari folder dengan fail Bootstrap anda pada cakera keras anda, tandakan semua fail di dalamnya, dan kemudian seretnya ke pelayan untuk memulakan muat naik. Prosesnya akan memerlukan sedikit masa untuk selesai bergantung pada kelajuan sambungan anda serta jumlah dan saiz fail.

    Namun, setelah selesai, apabila anda mengakses domain anda, anda seharusnya dapat melihat laman web yang sudah siap di tetingkap penyemak imbas anda.

    tutorial arahan bootstrap selesai halaman arahan

    Tidak buruk untuk beberapa baris kod, betul?

    Yang penting, jika anda ingin mempunyai keseluruhan kod untuk halaman termasuk CSS dan JavaScript tersuai, anda boleh memuat turun semuanya di sini. Dengan ini, anda mempunyai semua yang anda perlukan untuk membuat halaman arahan dengan Bootstrap.

    Kesimpulannya

    Bootstrap adalah kerangka pengembangan sumber terbuka dan terbuka yang boleh digunakan oleh sesiapa sahaja secara percuma. Ini membolehkan anda membuat prototaip dengan cepat, membuat laman web, dan secara umum berjalan lancar.

    Seperti yang anda lihat dalam tutorial Bootstrap ini untuk pemula, ia hanya memerlukan pengetahuan asas mengenai HTML, CSS, dan beberapa jQuery pilihan. Walaupun tidak selesa menggunakan WordPress, Bootstrap masih merupakan alternatif yang sah untuk membuat laman web.

    Sekarang, anda sudah tahu cara mengatur dan memasang Bootstrap dan komponennya, membuat halaman arahan yang mudah, memasukkan beberapa kandungan asas, dan menggayakannya. Anda boleh membuat menu navigasi, menetapkan gambar latar, memasukkan butang, lajur, dan borang hubungan.

    Sudah tentu, ada banyak lagi yang perlu dipelajari.

    Terima kasih kepada tutorial asas Bootstrap ini, anda sudah cukup tahu untuk terus maju sendiri. Sekiranya anda ingin menyelami kerangka kerja dengan lebih mendalam, titik permulaan yang baik adalah W3Sekolah. Selain itu, kami harap anda menyukai tutorial pemula ini dan ingin mendengar pendapat dan pengalaman anda mengenainya.

    Kemas kini: Kami juga membuat lembaran cheat bootstrap untuk pemula dalam versi .pdf dan .png.

    Adakah anda mempunyai idea mengenai tutorial Bootstrap di atas? Soalan, komen, permintaan? Beritahu kami di bahagian komen di bawah!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map