Mulakan Sesebuah Projek Laman Web Menggunakan Bootstrap 3

Pembangunan sesebuah laman web yang berjaya adalah datang daripada cara ia dibangunkan samaasa teratur mahupun sebaliknya. Ia bagi menjamin penambahbaikan pada sesebuah laman web tersebut dilakukan pada masa hadapan dalam keadaan yang mudah dan tidak terlalu memeningkan kepala. Bayangkan jika setiap projek yang dibangunkan mempunyai template yang berlainan, pastinya anda akan sukar untuk mengenal pasti cara ia dibangunkan sekiranya setiap satunya mempunyai template berlainan.

Bagi memudahkan pembangunan laman web, setiap design projek yang dibangunkan oleh saya pastinya menggunakan front-end framework contohnya Bootstrap dan Foundation. Namun begitu, antara kesemua front-end framework yang pernah digunakan oleh saya, saya amat berpuas hati dengan Bootstrap yang kini sudah mencapai angka versi v3.1.1. Walaubagaimanapun, Foundation tetap juga mempunyai kelebihan tersendiri contohnya pada jumlah fungsi yang ditawarkan olehnya. Tetapi kali ini, saya akan menfokuskan cara bagaimana untuk memulakan sesebuah projek yang dibangunkan menggunakan Bootstrap 3. Kedua-dua front-end framework ini juga membantu untuk membolehkan anda menyiapkan sebuah laman web responsif. Apakah maksud laman web responsif? Saya akan bincangkan perkara ini pada masa akan datang bersama anda dalam artikel yang lain.

Untuk itu, anda boleh memuat turun fail terbaru Bootstrap 3 di laman web getbootstrap.com. Jika anda tidak tahu mana satu fail yang ingin dimuat turun, saya sertakan link di bawah.

[download text="Muat Turun Bootstrap 3.1.1"]http://github.com/twbs/bootstrap/releases/download/v3.1.1/bootstrap-3.1.1-dist.zip[/download]

Bootstrap 3 telah menyediakan bersamanya GlyphIcons yang membolehkan anda menggunakan ikon pada elemen-elemen dalam web anda. Ia membolehkan laman web anda lebih praktikal dan interaktif. Namun begitu, jumlah GlyphIcons terlalu sedikit iaitu 200 ikon dan bagi saya ia terlalu terhad. Oleh itu, saya juga menambah Font Awesome dalam setiap projek yang dibangunkan. Font Awesome mempunyai 369 ikon termasuk ikon sosial dan sebagainya. untuk itu, anda boleh memuat turun daripada link dibawah.

[download text="Muat Turun FontAwesome 4.0.3"]http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.0.3.zip[/download]

Setelah kedua-dua fail ini dimuat turun, seterusnya buat satu folder kosong dalam komputer anda dan kemudiannya namakannya sebagai “template”. Di dalam folder template tersebut, buat 4 lagi folder kosong dan dinamakan sebagai “css”, “fonts”, “img” dan “js”. Ia akan dilihat seperti berikut :

Folder css adalah untuk meletakkan semua fail CSS dan fonts pula segalanya fail font, img untuk fail image dan js untuk fail javascript. Di tempat yang sama, tambah lagi satu fail yang dinamakan sebagai template.html bagi membuat template yang bakal digunakan disetiap fail html yang lain. manakala folder css buatkan satu fail baru yang dinamakan custom.css .

Fail custom.css adalah fail yang digunakan untuk meletakkan custom css untuk projek anda. contohnya dalam fail ini anda boleh membuang border-radius sesebuah button atau element dan juga mengubah warna pada sesebuah elemen. Kemudian anda boleh mula merge-kan semua fail yang telah dimuat turun oleh anda sebelum ini. Tetapi di dalam FontAwesome, terdapat dua folder yang tidak perlu untuk di masukkan dalam folder template ini. Ia adalah folder scss dan juga less.

setelah siap menggabungkan kesemua fail ke dalam folder template tersebut, ia akan kelihatan seperti berikut :

[coding title="Template Title Structure" type="Plain"]

template/
        css/
                bootstrap.css
                bootstrap.min.css
                bootstrap-theme.css
                bootstrap-theme.min.css
                custom.css
                font-awesome.css
                font-awesome.min.css
        fonts/
                FontAwesome.otf
                fontawesome-webfont.eot
                fontawesome-webfont.svg
                fontawesome-webfont.ttf
                fontawesome-webfont.woff
                glyphicons-halflings-regular.eot
                glyphicons-halflings-regular.svg
                glyphicons-halflings-regular.ttf
                glyphicons-halflings-regular.woff
        img/

        js/
                bootstrap.js
                bootstrap.min.js
        template.html

[/coding]

Jika anda perhatikan secara teliti, fail bootstrap.css, boostrap-theme.css, font-awesome.css dan bootstrap.js juga mempunyai versi fail “.min”. Jika anda buka fail tersebut, anda dapat perhatikan perbezaan antara kedua fail tersebut. Fail yang biasa berada dalam keadaan tersusun manakala fail yang mempunyai .min berada dalam keadaan yang berterabur. Kedua-duanya adalah sama namun fail yang biasa digunakan untuk tujuan development dan sebaliknya pada fail yang mempunyai fail .min adalah versi terakhir. Jika anda tidak mahu mengubah apa-apa isi di dalam fail tersebut, sebaiknya hanya menggunakan fail .min kerana saiz fail tersebut lebih kecil berbanding fail biasa. Saya galakkan pengubahan sebarang elemen hanya dilakukan pada custom.css bagi proses pembelajaran. Pengubahan sebarang isi pada fail yang sudah siap sedia dari fail yang dimuat turun mungkin bakal mengakibatkan kecelaruan.

Seterusnya, buka fail template.html dan masukkan kod seperti berikut :

[coding type="Xml" title="template/template.html"]

Bongkah

                        

Selamat Datang Ke Nizul.My

Baca Selanjutnya

[coding]

The post Mulakan Sesebuah Projek Laman Web Menggunakan Bootstrap 3 appeared first on Nizul.

Entri: Mulakan Sesebuah Projek Laman Web Menggunakan Bootstrap 3 Republish from: http://nizul.my/mulakan-sesebuah-projek-laman-web-menggunakan-bootstrap-3/