Desain Simple Login Form Dengan Bootstrap 4

Media Terbuka — Sat, 20 Apr 2019 16:24:00 +0000

Sebuah website yang memiliki hak akses pada suatu halaman tertentu, pastinya membutuhkan fitur Login Form, maka kali ini admin akan berbagi source code serta cara membuat Desain Simple Login Form Dengan Bootstrap 4.

#1. Folder Baru

Buatkan folder baru dengan nama login-form, tambahkan 2 subfolder yaitu css dan img. Pastikan struktur foldernya seperti gambar di bawah ini:

#2. index.html

Buka Editor Text-nya dan copy script di bawah ini:








Simple Login Form - Bootstrap 4






















Email address

Password




Remember me






Or
With your social media account












© 2019 Simple Login Form. All Rights Reserved | Design by MediaTerbuka

Simpan dengan nama index.html ke dalam folder login-form.

Buat file css, kemudian copy script di bawah ini:

html,
body {
height: 100%;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #868e96;
font-family: "Poppins", sans-serif;
}

body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}

.bg-login {
margin: auto;
padding: 35px;
border-radius: 5px;
background: linear-gradient(15deg,#dadada,#fff);
-webkit-box-shadow: 0px 0px 90px -26px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 90px -26px rgba(0,0,0,0.75);
box-shadow: 0px 0px 90px -26px rgba(0,0,0,0.75);
}

.icon {
width: 90px;
margin: auto;
border:3px solid #e0e0e0;
border-radius: 50%;
}

.fa-user-alt-slash{
font-size: 35px;
padding: 23px 0px;
width: 80px;
border-radius: 50%;
margin: auto;
display: block;
color: #bdbdbd;
background-color: #e0e0e0;
}

.form-signin {
width: 100%;
max-width: 390px;
padding: 15px;
margin: 0 auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px 20px;
font-size: 15px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
color: #868e96;
background: linear-gradient(15deg,#f7f5f5,#fff);
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
color: #868e96;
background: linear-gradient(15deg,#f7f5f5,#fff);
}

/* Outline None */
.form-control:hover, .form-control:focus, .form-control:active, .form-control:active:focus,
.form-control .form-control:not(:disabled):not(.disabled):active,
.form-control .form-control:not(:disabled):not(.disabled):active:focus {
outline: none !important;
box-shadow:none !important;
border: 1px solid #dee2e6;
}

/* Button */
.btn {
font-size: 15px !important;
padding: 11px 0px;
border-radius: 10em;
letter-spacing: 0.5px;
}

/* Social Media */
.social-media ul {
list-style-type: none;
padding: 0;
}
.social-media ul li a { color: white; }
.social-media ul li {
display:inline-block;
display:inline; /*IE7*/
zoom:1; /*IE7*/
margin-right:10px;
}

.social-media ul li .fa-facebook-f {
background-color: #0056b3;
padding: 15px 19px;
border-radius: 50%;
}

.social-media ul li .fa-twitter {
background-color: #1da1f2;
padding: 15px 15px;
border-radius: 50%;
}

.social-media ul li .fa-google {
background-color: #ea4335;
padding: 15px 15px;
border-radius: 50%;
}

/* Footer */
.footer a { text-decoration: none; }

#4. Selesai

Jalankan melalui browser, jika berhasil maka akan tampil seperti gambar di bawah ini:

DOWNLOAD

Demikianlah pembahasan mengenai Desain Simple Login Form Dengan Bootstrap 4 semoga bermanfaat, terima kasih.

The post Desain Simple Login Form Dengan Bootstrap 4 appeared first on MediaTerbuka.

Cara Mudah Install Framework Bootstrap 4, Khusus Untuk Pemula!

Media Terbuka — Thu, 18 Apr 2019 17:02:00 +0000

Framework ini memudahkan para developer dan designer untuk membuat sebuah aplikasi web menjadi lebih cepat dan mudah dibandingkan dengan membuatnya dari awal. Berikut sedikit penjelasannya:

Apa Yang Membuat Framework Ini Begitu Membantu Pekerjaan Khususnya Untuk Para Developer dan Designer?

Bootstrap adalah sebuah kerangka kerja untuk membangun website dinamis dengan menggunakan bahasa script CSS.

Kerangka Kerjanya Seperti Apa?

Framework ini telah membuat sekumpulan fungsi / prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih mempermudah dan mempercepat pekerjaan, tanpa harus membuat fungsi atau class dari awal.

Fitur Umumnya Pada Sebuah Framework

Mempercepat dan mempermudah pembangunan sebuah aplikasi web.
Relatif memudahkan dalam proses maintenance karena sudah ada pola tertentu dalam sebuah framework (dengan syarat pengguna harus mengikuti pola standar yang ada).
Umumnya framework menyediakan fasilitas-fasilitas yang umum dipakai sehingga kita tidak perlu membangun dari awal.
Lebih bebas dalam pengembangan.

Cara Menggunakan Bootstrap

Pertama lakukan instalasi Bootstrap, download filenya ke website resminya di sini.

Pada pembahasan kali ini menggunakan versi terbaru yaitu v4.3. Ada beberapa cara untuk menginstall Bootstrap, admin akan bagikan ke teman-teman semua yaitu cara instalasi secara online dan offline.

Cara Menginstall Bootstrap Secara Online

Disini sudah disediakan dukungan CDN untuk CSS dan JavaScript Bootstrap. Gunakan tautan CDN Bootstrap berikut ini:

Complete CSS

https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

Complete JavaScript – jQuery first, then Popper.js, then Bootstrap JS

https://code.jquery.com/jquery-3.3.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js

Template Awalan

Pastikan halaman teman-teman diatur dengan standar desain dan pengembangan terbaru. Itu berarti menggunakan doctype HTML5 dan termasuk meta tag viewport untuk perilaku responsif yang tepat. Gabungkan semuanya dan halaman akan terlihat seperti ini:











Hello, world!


Hello, world!

Simpan file dengan nama index.html, jika dijalankan melalui browser akan tampil seperti ini:

Cara Menginstall Bootstrap Secara Offline

Pada bagian instalasi ini sangat banyak di gunakan oleh para developer terutama admin sendiri, perbedaannya jika teman-teman install secara online diwajibkan untuk terkoneksi dengan internet hal ini dikarenakan file Bootstrap-nya terletak pada server luar dan sebaliknya jika install secara offline tidak perlu terkoneksi dengan internet karena file framework Bootstrap sudah kita miliki.

Langkah – Langkah Instalasi

Ekstrak file Bootstrap yang sudah didownload dan rubah nama foldernya menjadi “Bootstrap” atau apapun sesuai keinginan.
Buatkan file index.html dan simpan ke dalam folder “Bootstrap”.
Hubungkan file Bootstrap ke dalam script HTML, seperti di bawah ini:
```
Hello, world!


Hello, world!
```

Perhatikan script HTML di atas adalah standart dari Bootstrap. Jika teman-teman tidak menyisipkan script tersebut, maka Bootstrap tidak akan berjalan, hal ini perlu meletakkan link .css ini di bawah kode dan diatas

Kemudian letakkan link .js ini dibawah kode dan diatas

Jika dijalankan maka akan tampil seperti gambar di bawah ini:

Kesimpulan

Doctype HTML5

Bootstrap membutuhkan penggunaan doctype HTML5. Tanpa itu, teman-teman akan melihat beberapa gaya yang tidak lengkap.

...

Tag meta responsive

Bootstrap dikembangkan terlebih dahulu untuk seluler, sebuah strategi di mana pihak team Bootstrap mengoptimalkan kode untuk perangkat seluler terlebih dahulu dan kemudian meningkatkan komponen yang diperlukan menggunakan kueri media CSS. Untuk memastikan rendering yang tepat dan sentuhan zoom untuk semua perangkat, tambahkan tag meta viewport responsive ke bagian .

Referensi:

https://getbootstrap.com/

Demikianlah pembahasan mengenai Cara Mudah Install Framework Bootstrap 4, Khusus Untuk Pemula! semoga bermanfaat, terima kasih.

The post Cara Mudah Install Framework Bootstrap 4, Khusus Untuk Pemula! appeared first on MediaTerbuka.

Bootstrap Archives - MediaTerbuka