| Info | ||
|---|---|---|
| ||
|
Bootstrap
| Info | ||
|---|---|---|
| ||
Starter template
| Code Blockinfo | ||||||||
|---|---|---|---|---|---|---|---|---|
| info
| |||||||
<!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>Hello <title>Hello, world!</title> </head> <body><h1>Hello <h1>Hello, world!</h1> <!-- 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> |
Forms - NavBar
| Code Blockinfo | |||||
|---|---|---|---|---|---|
| info
| ||||
<nav class="navbar navbar-light bg-light"> <a class="navbar-brand">Navbar< >Navbar</a> <form class="form-inline"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </nav> |
Home.html
| Code Block | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<!DOCTYPE html> <html lang="en"> <head> <title>Reactive Link Shortener Sample Application</title> <meta charset=">Search</button> </form> </nav> utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
body {
text-align: center;
background-color: #f1f1f1;
}
.centered {
display: table;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
.form-inline .form-control {
width: 500px;
}
</style>
<script>
$(document).ready( function() {
$( "#searchForm" ).submit(function( event ) {
event.preventDefault();
var url = $(this).attr( "action" );
var senddata = $(this).find( "input[name='link']" ).val();
$.ajax({
type: 'POST',
url: url,
data: '{"link": "'+senddata+'"}',
success: function(data) {
$("#content").html('<a href="/link/'+data.shortenedLink+'" target="_blank">'+data.shortenedLink+'</a>');
},
contentType: "application/json",
dataType: 'json'
});
});
});
</script>
</head>
<body>
<br><br><br>
<div class="centered">
<nav class="navbar navbar-expand-sm navbar-dark">
<form class="form-inline" action="/link" id="searchForm">
<input class="form-control mr-sm-2" name="link" type="text" placeholder="http://wiki.iisanse.com">
<button class="btn btn-success" type="submit">Make Link</button>
</form>
</nav>
<div id="content">
</div>
</div>
</body>
</html> |