I've been coding for a while but I wouldn't really consider myself all that good at it. I recently started to learn bootstrap, and I really liked it and made a page to test it out. It has some basic bootstrap layouts and a little bit of jQuery.
I would like to learn better and more efficient ways to code, so any advice on better formatting and code would be very appreciated. Some spacing may be a bit weird because of formatting. Here is an example in Codepen.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
//button 1
$(document).ready(function(){
$("#button1").click(function(){
$("#text1").toggle();
});
});
//button 2
$(document).ready(function(){
$("#button2").click(function(){
$("#text2").fadeToggle();
});
});
//button 3
$(document).ready(function(){
$("#button3").click(function(){
//Had to break this line into 2 so I could post this, wouldn't let me indent/space right
$("#text3").fadeIn().slideUp(500).slideDown(500)
.slideUp(500).slideDown(500).fadeOut();
});
});
.div1 {
background-color:#80bfff;
}
.div2 {
background-color:#ccffff;
text-overflow: scroll;
}
.div3 {
background-color:#80bfff;
}
.row {
height: calc(100vh - 300px);
}
#main {
background-color: #3333ff;
}
#main_head {
height: 150px;
margin: 0;
}
#main_foot {
height: 150px;
background-color:#3333ff;
margin: 0;
position: absolute;
left: 0;
right: 0;
}
h1 {
color: black;
}
.drop1 {
background-color: #66ff99;
}
#coll_button {
height: 50px;
width: 200px;
border-radius: 6px;
margin-top: 30px;
margin-left: 20px;
}
#text1 {
padding-left: 10px;
padding-top: 10px;
display:none;
}
#text2 {
padding-left: 10px;
padding-top: 10px;
display:none;
}
#text3 {
padding-left: 10px;
padding-top: 10px;
display:none;
}
#modalbutton1 {
height: 50px;
margin-left: 20px;
margin-top: 20px;
}
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<div class="container-fluid" id="main">
<h1 id="main_head">This is a heading</h1>
<div class="row">
<div class="col-sm-2 div1">
<div class="btn-group-vertical">
<h4>These buttons don't work yet because I haven't implemented anything yet</h4>
<button id="button1" type="button" class="btn btn-warning">Toggle text</button>
<button id="button2" type="button" class="btn btn-info">Fade text</button>
<button id="button3" type="button" class="btn btn-success">Text animation</button>
</div>
</div>
<div class="col-sm-8 div2">
<button data-toggle="collapse" data-target="#main_collapse" class="btn-danger" id="coll_button">Collapsible</button>
<div id="main_collapse" class="collapse">
<h3>Some pretty neat random text that just appears when you click on the collapse thing</h3>
</div>
<br>
<!--Start modal-->
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="modalbutton1" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>This is a modal. It's a cool way of displaying pop up text at the click of a button.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--End modal-->
<h4 id="text1">This is some toggleable text</h4>
<h4 id="text2">You can fade this text in and out</h4>
<h4 id="text3">You can make this text slide up and down</h4>
</div>
<div class="col-sm-2 div3">
<div class="container">
<h4>This is a dropdown menu</h4>
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">Click the dropdown menu
<span class="caret"></span></button>
<ul class="dropdown-menu drop1">
<li class="drop1"><a href="#">Dropdown 1</a></li>
<li class="drop1"><a href="#">Dropdown 2</a></li>
<li class="drop1"><a href="#">Dropdown 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="main_foot" class="container-fluid"><h1>This is a footer</h1>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>