Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Plugin Introduction Bootstrap Wells

Bootstrap Create a Webpage

Next, we will use Bootstrap3 to create a simple responsive web page.

Before we learn, let's see the effect first:https://www.oldtoolbag.com/run/html/bootstrap-first-website-demo.html

HTML Code

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　A simple web page</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></<script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/<script>
	<style>
　　　　.fakeimg {
　　　　　　　　height:　200px;
　　　　　　　　　background: #aaa;
　　　　}
　　</<style>
</<head>
<body>
<div　class="jumbotron　text-center"　style="margin-bottom:0">
　　<h1>My first Bootstrap page</h1>
　　<p>Reset browser window size to see the effect!</p>　
</div>
<nav class="navbar navbar-inverse">
　　<div class="container-fluid">
　　　　<div class="navbar-header">
　　　　　　<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　<span class="icon-bar"></span>　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　</button>
　　　　　　<a class="navbar-brand" href="#">Website name</a>
　　　　</div>
　　　　<div class="collapse navbar-collapse" id="myNavbar">
　　　　　　<ul class="nav navbar-nav>
　　　　　　　　<li class="active"><a href="#">Home</a></li>
　　　　　　　　<li><a href="#">Page　2</a></li>
　　　　　　　　<li><a href="#">Page　3</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</nav>
<div class="container">
　　<div class="row">
　　　　<div class="col-sm-4">
　　　　　　<h2>About me</h2>
　　　　　　<h5>My photo:</h5>
　　　　　　<div class="fakeimg">Insert image here</div>
　　　　　　<p>About me...<//p>
　　　　　　<h2>Link</h2>
　　　　　　<p>Description text.</p>
　　　　　　<ul class="nav nav-pills nav-stacked">
　　　　　　　　<li class="active"><a href="#">Link　1</a></li>
　　　　　　　　<li><a href="#">Link　2</a></li>
　　　　　　　　<li><a href="#">Link　3</a></li>
　　　　　　</ul>
　　　　　　<hr class="hidden-sm hidden-md hidden-lg">
　　　　</div>
　　　　<div class="col-sm-8">
　　　　　　<h2>Title</h2>
　　　　　　<h5>Subtitle</h5>
　　　　　　<div class="fakeimg">Image</div>
　　　　　　<p>Some text.../p>
　　　　　　<p>Basic Tutorial Website, learn the basics, and you can go further!!! Basic Tutorial Website, learn the basics, and you can go further!!! Basic Tutorial Website, learn the basics, and you can go further!!!</p>
　　　　　　<br>
　　　　　　<h2>Title</h2>
　　　　　　<h5>Subtitle</h5>
　　　　　　<div class="fakeimg">Image</div>
　　　　　　<p>Some text.../p>
　　　　　　<p>Basic Tutorial Website, learn the basics, and you can go further!!! Basic Tutorial Website, learn the basics, and you can go further!!! Basic Tutorial Website, learn the basics, and you can go further!!!</p>
　　　　</div>
　　</div>
</div>
<div　class="jumbotron　text-center"　style="margin-bottom:0">
　　<p>Bottom Content</p>
</div>
</body>
</html>

Test and See ‹/›

Bootstrap Plugin Introduction Bootstrap Wells