Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Custom Bootstrap
Permisi min... bagaimana cara memudahkan untuk custom bootstrap misalnya ngerubah ukuran kolom, navbar, button, dll...? apakah harus ke file css style.nya bootstrap sendiri atau buat file css sendiri ?
4 Jawaban:
di override gan, artinya class-nya bootstrap ditimpa lagi agan inspect class-nya, trus override class tersebut.
misal gini, override navbarnya bootstrap;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.navbar.navbar-default {
background-color: red;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>
ga sedikit juga yg bikin id atau class sendiri, yg di terapkan berdampingan dengan class-nya bootstrap
#navbar-custom {
background: red
}
...
...
<div id="navbar-custom" class="navbar">...</div>
atau yg lebih canggih, agan nguasain salah satu SASS atau LESS disitu agan bisa inherit class-nya bootstrap
buat file sendiri style.css sama kek ane klo costum css gabungan bootstraps pasti beda
Kalo saya buat css sendiri di bawahnya Bootstrap gan.
