Auto Close Bootstrap Alerts

Hi guys.. follow the step below for make auto close bootstrap alerts.

1. HTML

<div class="alert alert-success" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Success!</strong> You have been signed in successfully!
</div>

2. CSS

@import "compass/css3";

body{
  padding: 50px;
}

3. JS

window.setTimeout(function() {
    $(".alert").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 4000);

Please click link for TUTORIAL.

Sekian Terima Kasih.
-------------------------------------------------------------------
Disediakan Oleh : Zainimar Binti Zulkifli
Sumber :https://codepen.io/CSWApps/pen/XJoLmN

Read More

Bootstrap Template

Assalamualaikum dan salam sejahtera,

Pembangunan laman web, blog, mobile apps dan banyak lagi menjadi lebih menarik dengan adanya kemudahan template dan theme yang disediakan dalam portal Start Bootstrap. Hanya ikut arahan yang diberi dan download Bootstrap yang berkaitan..

 

 Klik view source, contoh coding disediakan dalam GitHub..

Bagi beginner dalam Bootstrap, anda boleh mempelajari asas Bootstrap di laman web W3schools

Selamat Mencuba. happy coding!!

Sekian.

******************************************
Disediakan Oleh : Haslina Shamsudin
Sumber :
https://startbootstrap.com/
https://www.w3schools.com/bootstrap/bootstrap_templates.asp
******************************************

Read More

Custom Bootstrap Button Generator

Assalamualaikum dan Salam Sejahtera..

Coding lebih mudah dengan adanya custom bootstrap button generator.. lebih menarik dan cepat..

Contoh:

Untuk menggunakan icons yang disediakan, perlulah download file yang berkenaan terlebih dahulu.

Selamat mencuba!! happy coding!!

Sekian.

******************************************
Disediakan Oleh : Haslina Shamsudin
Sumber : http://www.plugolabs.com/custom-twitter-bootstrap-button-generator-with-famfamfam-icons/#
******************************************

Read More

Apa itu Font Awesome

Font Awesome adalah sekumpulan vector icon yang dapat dengan mudah di edit dari ukuran, warna, drop shadow dan apa sahaja yang boleh dilakukan menggunakan CSS. Dengan menggunakan font awesome kita boleh mendapatkan icon yang menarik tanpa menggunakan tag img atau load icon dari file gambar. Cukup dengan memasukkan tag html dengan class name tertentu kita sudah dapat menggunakan icon yang sudah tersedia di font awesome.

Keuntungan jika menggunakan Font Awesome

Ada beberapa keuntungan yang boleh kita dapatkan jika kita menggunakan Font Awesome ini, 

1. Terdapat 585 icon didalamnya dan akan bertambah dari masa ke semasa, 
2. Tidak memerlukan javascript untuk menggunakannya, 
3. Fleksibiliti ukuran dari ukuran kecil sehingga ukuran yang sangat besar, 
4. Mudah mengimplementasikan edit ukuran dan warna menggunakan css control, 
5. Mudah mengintegrasikan dengan framework html lainnya. 
6. Sangat fleksibel untuk merubah ukuran, warna dan efek css lain, 
7. Lebih cepat diload daripada load icon image.

Cara Menggunakannya

Untuk menggunakan Font Awesome ini pada sebuah website, yang perlu kita lakukan adalah load file font-awesome.css pada tag HEAD file html kita, untuk lebih jelasnya sila lihat code dibawah ini

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Pada code di atas, halaman website akan load font-awesome.min.css yang ada di BootstrapCDN. Dengan cara ini, kita akan selalu menggunakan latest dan versi yang stabil dari Font Awesome. Setelah itu, kita akan mengimplementasikan Font Awesome ini pada website kita, caranya sangatlah mudah dengan menuliskan code seperti dibawah ini

<!-- Basic Icon Size -->

<i class="fa fa-camera-retro"></i>

<i class="fa fa-camera-retro fa-lg"></i> fa-lg

<i class="fa fa-camera-retro fa-2x"></i> fa-2x

<i class="fa fa-camera-retro fa-3x"></i> fa-3x

<i class="fa fa-camera-retro fa-4x"></i> fa-4x

<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Hasilnya adalah seperti berikut

Contoh Lain

Untuk melihat secara lengkap icon yang boleh dibuat menggunakan Font Awesome sila kunjungi halaman Font Awesome Icon List

--------------------------------------------------------------------------------------------
Disediakan Oleh : Marzuki bin Ahmad
Sumber :  

• http://belajarngoding.com/apa-itu-font-awesome
• https://fortawesome.github.io/Font-Awesome/

Read More

Bootstrap 3

Perkongsian maklumat berkenaan Bootstrap 3

Sumber rujukan http://getbootstrap.com/

Perbezaan antara bootstrap 2.3.2

Reference table for classes that have changed between v2.x and v3.0.

Bootstrap 2.x	Bootstrap 3.0
.container-fluid	.container
.row-fluid	.row
.span*	.col-md-*
.offset*	.col-md-offset-*
.brand	.navbar-brand
.nav-collapse	.navbar-collapse
.nav-toggle	.navbar-toggle
.btn-navbar	.navbar-btn
.hero-unit	.jumbotron
.icon-*	.glyphicon .glyphicon-*
.btn	.btn .btn-default
.btn-mini	.btn-xs
.btn-small	.btn-sm
.btn-large	.btn-lg
.visible-phone	.visible-sm
.visible-tablet	.visible-md
.visible-desktop	.visible-lg
.hidden-phone	.hidden-sm
.hidden-tablet	.hidden-md
.hidden-desktop	.hidden-lg
.input-small	.input-sm
.input-large	.input-lg
.checkbox.inline .radio.inline	.checkbox-inline .radio-inline
.input-prepend .input-append	.input-group
.add-on	.input-group-addon
.thumbnail	.img-thumbnail
ul.unstyled	.list-unstyled
ul.inline	.list-inline

Pertukaran code hanya berlaku di FOLDER VIEW

Pertambahan code untuk Bootstrap 3

Element	Description
Panels	.panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
List groups	.list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons	.glyphicon
Jumbotron	.jumbotron
Tiny grid (<768 px)	.col-xs-*
Small grid (>768 px)	.col-sm-*
Medium grid (>992 px)	.col-md-*
Large grid (>1200 px)	.col-lg-*
Offsets	.col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Push	.col-sm-push-* .col-md-push-* .col-lg-push-*
Pull	.col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Input groups	.input-group .input-group-addon .input-group-btn
Form controls	.form-control .form-group
Button group sizes	.btn-group-xs .btn-group-sm .btn-group-lg
Navbar text	.navbar-text
Navbar header	.navbar-header
Justified tabs / pills	.nav-justified
Responsive images	.img-responsive
Contextual table rows	.success .danger .warning .active
Contextual panels	.panel-success .panel-danger .panel-warning .panel-info
Modal	.modal-dialog .modal-content
Thumbnail image	.img-thumbnail
Well sizes	.well-sm .well-lg
Alert links	.alert-link

Dan yang terakhir sedikit perubahan dimana element2 css tidak lagi terdapat di dalam bootstrap 3

Element	Removed from 2.x	3.0 Equivalent
Form actions	.form-actions	N/A
Search form	.form-search	N/A
Fluid container	.container-fluid	.container (no more fixed grid)
Fluid row	.row-fluid	.row (no more fixed grid)
Navbar inner	.navbar-inner	N/A
Dropdown submenu	.dropdown-submenu	N/A
Tab alignments	.tabs-left .tabs-right .tabs-below	N/A

Posted By
Naim Najrim Zakaria

Read More