Bootstrap 3 how-to #2 Title, link and button

The main points of this series come from a book named Twitter Bootstrap web development how-to. However, the content of this book is based on previous versions and is different from the latest version 3.0.

To facilitate learning and use Bootstrap 3, replace the content with the current version 3.0. You can buy the original book at Amazon. $17.99. The content of the original book is relatively simple. I will try to add some content.

 

 

If you are familiar with HTML, you can quickly fill in the content of the webpage. However, bootstrap has some features that require your attention.

Start

If you are a newbie to HTML, the best HTML learning and reference site is http://htmldog.com, here the HTML beginner tutorial can help you learn the basic knowledge, I strongly recommend that you learn the CSS tutorial here, so that you can better learn Bootstrap.

In the bootstrap 3.0 folder, create a folder named study and a working folder named 2.

Copy the two files in starter-template to your work folder to start learning.

1. Edit the title of the webpage, update row 50th of the index.html file to the following content, and add the small tag.

2. Save the file and check the browser to view the page.
You should see the page become the following style.

We will also turn the link into a button. Let's see how simple this is.
1. Edit the 52 lines of the web page and change the original paragraph to the following content. Note that BTN and BTN-default classes are used on the link.
In earlier versions, only the class BTN can be used as a normal button. In 3.0, a btn-default must be added.
<p><a class="btn btn-default" href="#">View details &raquo;</a></p>
2. BTN and BTN-default set in the class are magic! The current button looks as follows:

Many related classes are preset in Bootstrap.
Color:

<!-- Standard gray button with gradient --><button type="button" class="btn btn-default">Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons --><button type="button" class="btn btn-primary">Primary</button><!-- Indicates a successful or positive action --><button type="button" class="btn btn-success">Success</button><!-- Contextual button for informational alert messages --><button type="button" class="btn btn-info">Info</button><!-- Indicates caution should be taken with this action --><button type="button" class="btn btn-warning">Warning</button><!-- Indicates a dangerous or potentially negative action --><button type="button" class="btn btn-danger">Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior --><button type="button" class="btn btn-link">Link</button>
Button size

<p>  <button type="button" class="btn btn-primary btn-lg">Large button</button>  <button type="button" class="btn btn-default btn-lg">Large button</button></p><p>  <button type="button" class="btn btn-primary">Default button</button>  <button type="button" class="btn btn-default">Default button</button></p><p>  <button type="button" class="btn btn-primary btn-sm">Small button</button>  <button type="button" class="btn btn-default btn-sm">Small button</button></p><p>  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>  <button type="button" class="btn btn-default btn-xs">Extra small button</button></p>
You can also find these instructions in the online document: http://getbootstrap.com/css/#buttons
Working Principle
As mentioned above, bootstrap provides a lot of convenient styles to deal with most common scenarios, including scenarios that you may not have imagined, if you have not carefully read the online documentation of Bootstrap, take a look.
In addition, the best way to learn is to open the bootstrap.css file and read it carefully. Take a cup of tea from the chores and study the content. You will be more familiar with how Bootstrap works.
Extension
After you are ready, you can also customize your own themes. Bootstrap provides a great custom page: http://getbootstrap.com/mimize/, where you can define more content.
Bootstrap 3 how-to #2 Title, link and button