Langkah membuat Inline Login dengan Bootstrap

Langsung aja kita mulai tutorial membuat Inline Login
Pertama buatlah folder dengan nama Inline Login lalu buat lagi folder di dalamnya dengan nama css
Buat file css dan tulis script di bawah ini dan simpan dengan nama devclod_style.css

*, body { font-family: 'Open Sans', sans-serif; }
body { margin-bottom: 30px; }
h1 {
 font-weight: 300;
 font-size: 36px;
 line-height: normal;
 margin: auto;
 margin-top: 30px;
 text-align: center;
}
h2 {
 font-weight: 500;
 font-size: 20px;
 line-height: normal;
 margin: auto;
 margin-bottom: 30px;
 text-align: center;
 color: #09F;
}

.devclod-header {
 background-color: #000000;
 color: white;
 min-height: 90px;
}
.devclod-header .checkbox {
 display: block;
 margin-top: 5px;
}
.devclod-header form { margin-top: 25px; }
.devclod-header .form-inline .form-group { vertical-align: top; }

.logo { margin: 18px; }

Ini beberapa file css yang haru kalian download

• font-awesome.min.css

• bootstrap.min.css

• bootstrap-theme.min.css

download paket css Bootstrap

Buat halaman indexnya dengan nama index.html berikut scriptnya :
Taruh Script  di bawah di atas  </head>

link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"
link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"
link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"
link href="css/devclod_style.css" rel="stylesheet" type="text/css"

Taruh di atas </body>

 div class="devclod-header"
div class="container"
div class="col-md-12"
h1 class="logo pull-left" (Devclod) /h1
form class="form-inline pull-right" role="form"
div class="form-group"
div class="input-group"
div class="input-group-addon"
i class="fa fa-envelope-o"
/i
/div
input class="form-control" type="email" placeholder="Enter email"
/div
/div
div class="form-group"
label class="sr-only" for="password" (Password) /label
input type="password" class="form-control" id="password" placeholder="Password"
div class="checkbox"
label class="font-size-small"
input type="checkbox" (Remember me)
/label
/div
/div
button type="submit" class="btn btn-default" (Sign in) /button
/form
/div 
/div 
/div
 

sekarang coba kalian jalankan di browser kalian dan lihat hasilnya

Related Items Pemrograman