Operation methods of each element in the Bootstrap navigation bar (Form, button, text), and the bootstrap navigation bar

Source: Internet
Author: User

Operation methods of each element in the Bootstrap navigation bar (Form, button, text), and the bootstrap navigation bar

This article mainly includes three main aspects for you to study carefully.

1. Form in the navigation bar
The form in the navigation bar is not the default class mentioned in the Bootstrap form section. It uses. navbar-form class. This ensures the proper vertical alignment of the form and the behavior of folding in a narrow view. Use the alignment option (which will be detailed in the component alignment section) to determine where the content in the navigation bar is placed.

The following example demonstrates this:

<! DOCTYPE html> 

Effect:

Black Effect

2. buttons in the navigation bar
You can use class. navbar-btn to add a button to the <button> element not in <form>. The button is vertically centered in the navigation bar .. Navbar-btn can be used on <a> and <input> elements.

Do not use. navbar-btn on the <a> element in. navbar-nav because it is not a standard button class.
The following example demonstrates this:

<! DOCTYPE html> 

The effect is as follows:

3. Text in the navigation bar
To include a text string in the navigation bar, use class. navbar-text. This is usually used with the <p> label to ensure proper leading and color. The following example demonstrates this:

<Div class = "navbar-header"> <a class = "navbar-brand" href = "#"> Lin bingwen ~ </A> </div> <p class = "navbar-text"> text in the navigation bar </p> </div> <div>

The effect is as follows:

The above is all the content of this article. I hope it will help you learn more and you can implement the Bootstrap navigation bar more skillfully.

Articles you may be interested in:
  • Every day, Bootstrap must learn
  • Navigation bar required by Bootstrap every day
  • Bootstrap implements the default navigation bar Effect
  • Implement responsive navigation bar using Bootstrap

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.