Bootstrap Create a Web Page
Next, let's create a simple responsive web page using Bootstrap 3.
Before learning, we can take a look at the effect:https://www.example.com/try/demo_source/bootstrap3-makewebsite.htm
HTML Code
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>My First Bootstrap Page</h1>
<p>Resize the browser window 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="#">Site 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 Photos:</h5>
<div class="fakeimg">Insert image here</div>
<p>Introduction about me..</p>
<h3>Links</h3>
<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>Example, what you learn is not only technology, but also dreams!!! Example, what you learn is not only technology, but also dreams!!! Example, what you learn is not only technology, but also dreams!!!</p>
<br>
<h2>Title</h2>
<h5>Subtitle</h5>
<div class="fakeimg">Image</div>
<p>Some text..</p>
<p>Example, what you learn is not only technology, but also dreams!!! Example, what you learn is not only technology, but also dreams!!! Example, what you learn is not only technology, but also dreams!!!</p>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Footer content</p>
</div>
Try it »