Skip to content

Instantly share code, notes, and snippets.

@syang-ng

syang-ng/SimpleBootstrap.html

Created April 11, 2018 10:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save syang-ng/5bda258a238f002bfac4f93b8ae4e70d to your computer and use it in GitHub Desktop.
Save syang-ng/5bda258a238f002bfac4f93b8ae4e70d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
SimpleBootstrap.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chapter 5</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Share Your Travels</a>
</div>
<div>
<p class="navbar-text">let us know where you've been</p>
</div>
</div>
</nav>
</header>
<main>
<section class="container">
<form method="post" action="http://www.randyconnolly.com/tests/process.php">
<fieldset class="form-group">
<legend>Photo Details</legend>
<label>Title</label>
<input type="text" name="title" placeholder="Give your photo a descriptive name" class="form-control" />
<br />
<label>Description</label>
<textarea name="description" placeholder="Adding a rich description will help with search results" class="form-control"></textarea>
<br />
<label>Continent</label>
<select name="continent" class="form-control">
<option>Choose continent</option>
<option>Africa</option>
<option>Asia</option>
<option>Europe</option>
<option>North America</option>
<option>South America</option>
</select>
<br />
<label>Country</label>
<select name="country" class="form-control">
<option>Choose country</option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
<br />
<label>City</label>
<input type="text" name="city" list="cities" class="form-control" />
<datalist id="cities">
<option>Calgary</option>
<option>Montreal</option>
<option>Toronto</option>
<option>Vancouver</option>
</datalist>
<br />
<div>
<label>Copyright? </label>
</div>
<div>
<div class="radio-inline">
<input type="radio" name="copyright" value="1">All rights reserved</input>
</div>
<div class="radio-inline">
<input type="radio" name="copyright" value="2" checked>Creative Commons</input>
</div>
</div>
<br />
<div>
<label>Creative Commons Types </label>
</div>
<div>
<label class="checkbox-inline">
<input type="checkbox" name="cc[]" value="1"> Attribution
</label>
<label class="checkbox-inline">
<input type="checkbox" name="cc[]" value="2"> Noncommercial
</label>
<label class="checkbox-inline">
<input type="checkbox" name="cc[]" value="3"> No Derivative Works
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />I accept the software license
</label>
</div>
<div class="form-inline">
<div class="form-group">
<label>Rate this photo:</label>
<input type="number" min="1" max="5" name="rate" class="form-control" />
</div>
<div class="form-group">
<label>Color Collection:</label>
<input type="color" name="color" class="form-control"/>
</div>
</div>
<br />
<div class="form-inline">
<div class="form-group">
<label>Date Taken:</label>
<input type="date" name="date" class="form-control"/>
</div>
<div class="form-group">
<label>Time Taken:</label>
<input type="time" name="time" class="form-control"/>
</div>
</div>
<br />
<div class="btn-group">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-primary">Clear</button>
</fieldset>
</form>
</section>
</main>
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment