Adding a Button
Button classes can be used in
<a>, <button>, or <input> elements.
The following example puts a large and light-blue "Search" button in the Jumbotron. To achieve this effect, we will use the
.btn-lg and .btn-info classes:Example
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg">Search</a>
</div>
Try it Yourself » | Why do we put a # in the href attribute of the link? Since we do not have any page to link it to, and we do not want to get a "404" message, we put # as the link. In real life it should of course been a real URL to the "Search" page. |
|---|
Adding an Icon
Bootstrap also provides 200 glyphicons.
To display a glyphicon, simply write:
<span class="glyphicon glyphicon-print"></span>
The code line above will display a Print icon like this:
The following example adds a Search icon on the "Search" button:
Example
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
</div>
Try it Yourself »
0 Comments:
Post a Comment