Skip to content

Instantly share code, notes, and snippets.

@Malex

Malex/book.html

Created July 30, 2018 15:43
Show Gist options
  • Save Malex/962bd1cbc1d85503b1180b579658de0f to your computer and use it in GitHub Desktop.
Save Malex/962bd1cbc1d85503b1180b579658de0f to your computer and use it in GitHub Desktop.
Download ZIP
tmp-library-books
Raw
book.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>My Library</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="sticky-footer-navbar.css" rel="stylesheet">
</head>
<body>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./books.html">Books</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="./book.html">Add book</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<!-- Begin page content -->
<main role="main" class="container col-md-10">
<form>
<div class="form-group row">
<label for="book_id" class="col-sm-1 col-form-label">Id:</label>
<div class="col-sm-8">
<input type="number" class="form-control" placeholder="@ID.." id="book_id" />
</div>
</div>
<div class="form-group row">
<label for="book_title" class="col-sm-1 col-form-label">Title:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="book_title" placeholder="Title" />
</div>
</div>
<div class="form-group row">
<label for="book_author" class="col-sm-1 col-form-label">Author:</label>
<div class="col-sm-8">
<select id="book_author" class="custom-select" multiple>
<option>Agatha Christie</option>
<option>James Gosling</option>
<option>Ken Arnold</option>
<option>David Holmes</option>
</select>
</div>
<div>
<button type="button" class="btn btn-outline-info btn-sm">Add new author...</button>
</div>
</div>
<div class="form-group row">
<label for="book_pub" class="col-sm-1 col-form-label">Publisher:</label>
<div class="col-sm-8">
<div class="input-group mb-3">
<select id="book_pub" class="custom-select">
<option>Mondadori</option>
<option>Addison-Wesley Professional</option>
</select>
<div class="input-group-append">
<button type="button" class="btn btn-outline-info btn-sm">Add new publisher...</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-1">Categories:</div>
<div class="col-sm-8">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="other" value="other" />
<label class="form-check-label" for="other">Other</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="arts" value="arts" />
<label class="form-check-label" for="arts">Arts and Photography</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="IT" value="IT" />
<label class="form-check-label" for="IT">Computers and Technology</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="history" value="history" />
<label class="form-check-label" for="history">History</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="fiction" value="fiction" />
<label class="form-check-label" for="fiction">Literature and Fiction</label>
</div>
</div>
</div>
</form>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="assets/js/vendor/popper.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
</body>
</html>
Raw
books.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Library's Book</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="sticky-footer-navbar.css" rel="stylesheet">
</head>
<body>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./index.html">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#l">Books<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<!-- Begin page content -->
<main role="main" class="container col-md-10">
<table class="table table-striped table-bordered table-hover mt-5">
<caption>List of books in the library.</caption>
<thead>
<tr>
<th scope="col">#Id</th>
<th scope="col">ISBN</th>
<th scope="col">Title</th>
<th scope="col">Authors</th>
<th scope="col">Publisher</th>
<th scope="col">Price</th>
<th scope="col">Categories</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>0000-1111-2222</td>
<td>Dieci Piccoli Indiani</td>
<td>
<ul class="list-unstyled">
<li>Agatha Christie</li>
</ul>
</td>
<td>Mondadori</td>
<td>10.5</td>
<td>
<ul class="list-unstyled">
<li>Literature and Fiction</li>
<li>Other</li>
</ul>
</td>
<td>
<div class="btn-group-vertical">
<button type="button" class="btn btn-outline-primary">Edit</button>
<button type="button" class="btn btn-outline-danger">Delete</button>
</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>0000-1111-0000</td>
<td>The Java Programming Language</td>
<td>
<ul class="list-unstyled">
<li>Ken Arnolds</li>
<li>James Gosling</li>
<li>David Holmes</li>
</ul>
</td>
<td>Addison-Wesley Professional</td>
<td>66.49</td>
<td>
<ul class="list-unstyled">
<li>Computers and Technology</li>
</ul>
</td>
<td>
<div class="btn-group-vertical">
<button type="button" class="btn btn-outline-primary">Edit</button>
<button type="button" class="btn btn-outline-danger">Delete</button>
</div>
</td>
</tr>
<tr>
<th scope="row">1</th>
<td>0000-1111-3333</td>
<td>Assassinio sull'Orient Express</td>
<td>
<ul class="list-unstyled">
<li>Agatha Christie</li>
</ul>
</td>
<td>Mondadori</td>
<td>10.5</td>
<td>
<ul class="list-unstyled">
<li>Literature and Fiction</li>
<li>Other</li>
</ul>
</td>
<td>
<div class="btn-group-vertical">
<button type="button" class="btn btn-outline-primary">Edit</button>
<button type="button" class="btn btn-outline-danger">Delete</button>
</div>
</td>
</tr>
</tbody>
</table>
<a class="btn btn-outline-info" role="button" href="./book.html">Add new book...</a>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="assets/js/vendor/popper.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment