Membuat Website
Bootstrap adalah toolkit sumber terbuka
untuk dikembangkan dengan HTML, CSS, dan JS. Prototipe
ide-ide Anda dengan cepat atau bangun seluruh aplikasi Anda dengan variabel dan
campuran Sass kami, sistem grid responsif, komponen prebuilt yang luas, dan
plugin yang kuat yang dibangun di jQuery.
Dimulai dengan started template :
Pastikan halaman Anda 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 Anda
akan terlihat seperti ini:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<title>NASA</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js,
then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
|
Bootstrap membutuhkan penggunaan doctype
HTML5. Tanpanya, Anda akan melihat beberapa gaya funky
yang tidak lengkap, tetapi termasuk itu tidak akan menyebabkan masalah besar.
<!doctype html>
<html </html>
|
Bootstrap dikembangkan terlebih dahulu
untuk seluler, sebuah strategi di mana kami 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
responsif ke <head> Anda.
<meta |
Membuat Navbar:
Navbar dilengkapi dengan dukungan bawaan untuk beberapa sub-komponen.
Pilih dari berikut ini sesuai kebutuhan:
.navbar-brand untuk perusahaan, produk, atau nama proyek Anda.
.navbar-nav untuk navigasi penuh dan ringan (termasuk dukungan untuk dropdown).
.navbar-toggler untuk digunakan dengan plugin runtuh dan perilaku pengalih navigasi lainnya.
.form-inline untuk segala bentuk kontrol dan tindakan.
.navbar-text untuk menambahkan string teks yang terpusat secara vertikal.
.collapse.navbar-collapse untuk mengelompokkan dan menyembunyikan konten navbar oleh breakpoint induk.
.navbar-brand untuk perusahaan, produk, atau nama proyek Anda.
.navbar-nav untuk navigasi penuh dan ringan (termasuk dukungan untuk dropdown).
.navbar-toggler untuk digunakan dengan plugin runtuh dan perilaku pengalih navigasi lainnya.
.form-inline untuk segala bentuk kontrol dan tindakan.
.navbar-text untuk menambahkan string teks yang terpusat secara vertikal.
.collapse.navbar-collapse untuk mengelompokkan dan menyembunyikan konten navbar oleh breakpoint induk.
Berikut adalah contoh semua sub-komponen
yang termasuk dalam navbar bertema cahaya responsif yang secara otomatis runtuh
di breakpoint lg (besar).
<nav
</nav>
|
Penggunaan carousel :
Carousel adalah
tampilan slide untuk bersepeda melalui serangkaian konten, dibangun dengan
transformasi 3D CSS dan sedikit JavaScript. Ini berfungsi
dengan serangkaian gambar, teks, atau markup kustom. Ini
juga termasuk dukungan untuk kontrol dan indikator sebelumnya / berikutnya.
<div
</div>
|
Membuat Grid:
Contoh di atas membuat tiga kolom dengan lebar
sama pada perangkat kecil, sedang, besar, dan ekstra besar menggunakan kelas
kisi yang telah ditentukan sebelumnya. Kolom-kolom itu dipusatkan di halaman
dengan induk .container.
Hancurkan, inilah cara kerjanya:
Wadah menyediakan sarana untuk memusatkan dan
secara horizontal mengisi konten situs Anda. Gunakan .container untuk lebar
piksel responsif atau .container-fluid untuk lebar: 100% di semua ukuran
viewport dan perangkat.
Baris adalah pembungkus untuk kolom. Setiap
kolom memiliki bantalan horizontal (disebut selokan) untuk mengontrol ruang di
antara mereka. Padding ini kemudian dinetralkan pada baris dengan margin
negatif. Dengan cara ini, semua konten di kolom Anda disejajarkan secara visual
di sisi kiri.
Dalam tata letak kisi, konten harus ditempatkan
di dalam kolom dan hanya kolom yang bisa menjadi anak baris langsung.
Berkat flexbox, kolom kotak tanpa lebar yang
ditentukan akan secara otomatis tata letak sebagai kolom dengan lebar yang
sama. Sebagai contoh, empat instance dari .col-sm masing-masing akan secara
otomatis menjadi 25% lebar dari breakpoint kecil ke atas. Lihat bagian tata
letak kolom otomatis untuk lebih banyak contoh.
Kelas kolom menunjukkan jumlah kolom yang ingin
Anda gunakan dari kemungkinan 12 per baris. Jadi, jika Anda ingin tiga kolom
sama dengan lebar, Anda bisa menggunakan .col-4.
Lebar kolom ditetapkan dalam persentase,
sehingga mereka selalu berubah-ubah dan berukuran relatif terhadap elemen
induknya.
Kolom memiliki padding horizontal untuk membuat
talang di antara masing-masing kolom, namun, Anda dapat menghapus margin dari
baris dan padding dari kolom dengan .no-talang di .row.
Untuk membuat grid responsif, ada lima
breakpoint grid, satu untuk setiap breakpoint responsif: semua breakpoint
(ekstra kecil), kecil, sedang, besar, dan ekstra besar.
Grid breakpoint didasarkan pada kueri media
lebar minimum, yang berarti mereka berlaku untuk satu breakpoint dan semua yang
di atasnya (mis., Col-sm-4 berlaku untuk perangkat kecil, sedang, besar, dan
ekstra besar, tetapi bukan breakpoint xs pertama ).
Anda bisa menggunakan kelas kisi yang sudah
ditentukan sebelumnya (seperti .col-4) atau Sass mixin untuk markup yang lebih
semantik.
Script :
<!doctype
html>
<html
lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<title>NASA</title>
<!-- font css -->
<link href="https://fonts.googleapis.com/css?family=Exo+2&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous">
<style
type="text/css">
html,
body{
font-family:
'Exo 2', sans-serif;
background-color:
black;
/*scrollbar-color:
auto | dark | light | yellow;*/
}
.nav-link{
margin-left:
15px;
}
.navbar{
background:
black;
transition:
.5s;
/*margin-top:
30px;*/
}
.carousel-inner{
width:100%;
max-height: 550px !important;
}
.jarak{
padding-bottom:
80px;
}
nav{
/*padding-bottom:
*/
}
</style>
</head>
<body>
<style
type="text/css">
.carousel{
margin-top:
50px;
}
.bgbgbg{
background-color:
#010101;
}
.nav-link{
color:
#ababab;
}
</style>
<!--
START::NAVBAR -->
<nav
class="navbar fixed-top navbar-expand-lg">
<div
class="container">
<a class="navbar-brand"
href="#">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/NASA_logo.svg/1200px-NASA_logo.svg.png"
width="50">
</a>
<button class="navbar-toggler"
type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-align-right"
style="color: white;"></i>
</button>
<div class="collapse
navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav
ml-auto">
<li class="nav-item
active">
<a class="nav-link"
href="#">Home</a>
</li>
<li class="nav-item
active">
<a class="nav-link"
href="#">About Us</a>
</li>
<li class="nav-item
active">
<a class="nav-link"
href="#">FAQ</a>
</li>
<li class="nav-item
active">
<a class="nav-link"
href="#">Sitemap</a>
</li>
</ul>
</div>
</div>
</nav>
<!--
END::NAVBAR -->
<!--
START::SLIDER -->
<div
id="carouselExampleIndicators" class="carousel slide"
data-ride="carousel">
<ol
class="carousel-indicators">
<li
data-target="#carouselExampleIndicators"
data-slide-to="0" class="active"></li>
<li
data-target="#carouselExampleIndicators"
data-slide-to="1"></li>
<li
data-target="#carouselExampleIndicators"
data-slide-to="2"></li>
</ol>
<div
class="carousel-inner">
<div class="carousel-item
active">
<img
src="http://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"
class="d-block w-100" alt="...">
</div>
<div
class="carousel-item">
<img
src="https://i1.wp.com/d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/O2go0Bd/space-shuttle-floats-in-space-perfect-of-computer-graphics-videos-about-space-earth-orbit-iss-the-international-space-station-astronauts-nasa-and-discovery_bszb1kc1wx_thumbnail-full01.png"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img
src="https://media2.giphy.com/media/BpcQEC4jvGGJO/giphy.gif"
class="d-block w-100" alt="...">
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleIndicators" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span
class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleIndicators" role="button"
data-slide="next">
<span
class="carousel-control-next-icon"
aria-hidden="true"></span>
<span
class="sr-only">Next</span>
</a>
</div>
<!--
END::SLIDER -->
<style
type="text/css">
.aboutus{
background-color:
#010101;
padding-bottom:
50px;
padding-top:
50px;
}
</style>
<!--
START::SECTION::ABOUTUS -->
<section
class="aboutus">
<div
class="container">
<div
class="row">
<div
class="col-lg-4">
<div
style="font-size: 3em; color: #ababab; background: rgb(255,0,0);
background:
linear-gradient(90deg, rgba(255,0,0,1) 15%, rgba(0,128,255,1)
100%);"> ABOUT</div>
</div>
<div
class="col-lg-8" style="color: #ababab;">
Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</section>
<!--
END::SECTION::ABOUT US -->
<style
type="text/css">
.atas{
height:
200px;
}
.atas-1{
background-image:
url("https://az3.sfo2.cdn.digitaloceanspaces.com/bingdesktop/16430044911437762942.jpg");
background-size:
cover;
}
.atas-2{
background-image:
url("https://canadanewsmedia.ca/wp-content/uploads/2019/06/Artist%E2%80%99s-concept-of-a-future-moon-landing-carried-out-under-NASAs-newly-named-Artemis-program_NASA.jpg");
background-size:
cover;
}
.atas-3{
background-image:
url("https://www.celeclub.org/wp-content/uploads/2019/01/Space-Exploration.jpg");
background-size:
cover;
}
.atas-4{
background-image:
url("http://www.aljanh.net/data/archive/img/10422129.jpeg");
background-size:
cover;
background-position:
center;
}
</style>
<!--
START::SECTION::GRID -->
<section
class="grid">
<div
class="container-fluid">
<div
class="row">
<div
class="col-lg-6 atas atas-1"></div>
<div
class="col-lg-3 atas atas-2"></div>
<div
class="col-lg-3 atas atas-3"></div>
</div>
<div
class="row">
<div
class="col-lg-3 atas atas-2"></div>
<div
class="col-lg-3 atas atas-3"></div>
<div
class="col-lg-6 atas atas-4"></div>
</div>
</div>
</section>
<!--
END::SECTION::GRID -->
<!--
START::FOOTER -->
<footer
style="height: 100px; background-color: #010101; padding-top: 50px;
margin-bottom: 50px;">
<div
class="container">
<div
class="row">
<div
class="col-lg-7" style="color: white;">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/NASA_logo.svg/1200px-NASA_logo.svg.png"
width="50">
NASA
- GOV
</div>
<div
class="col-lg-5">
<div
style="color: white; text-align: right;">
<span
style="background: rgb(255,0,0);
background:
linear-gradient(90deg, rgba(255,0,0,1) 15%, rgba(0,128,255,1)
100%);"> Follow Us! </span> <br>
<i
class="fab fa-instagram"> NASA</i>
<i
class="fab fa-twitch"> NASA GOV</i>
<i
class="fas fa-hashtag">Uhuyyyy</i>
</div>
</div>
</div>
</div>
</footer>
<!--
END::FOOTER -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js,
then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() >
50){
//
$('.navbar').css('background-color', 'rgba(0, 0, 0, 0.63)');
$('.navbar').css('margin-top', '0px');
//
$('.navbar').css('background-color', 'black');
}else{
// $('.navbar').css('background-color',
'transparent');
$('.navbar').css('margin-top', '10px');
//
$('.navbar').css('background-color', 'transparent');
}
});
});
</script>
</body>
</html>
|
Membuat animate pada navbar pada saat scroll :
<script>
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() >
50){
$('.navbar').css('margin-top', '0px');
}else{
$('.navbar').css('margin-top', '10px');
}
});
});
</script>
|
Dan seperti inilah hasilnya :)
Komentar
Posting Komentar