Bs Tabs/Pills

-

Bootstrap Tabs in addition to Pills

Menus

Most spider web pages accept but about sort of a menu.
In HTML, a bill of fare is ofttimes defined inwards an unordered listing <ul> (and styled afterwards), similar this:
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>
If you lot desire to practice a horizontal bill of fare of the listing above, add together the .list-inline bird to <ul>:
<ul class="list-inline">
Or you lot tin display the bill of fare inwards a higher identify amongst Bootstraps' Tabs in addition to Pills (see below).
Note: See the last example on this page to notice out how to brand tabs in addition to pills toggleable/dynamic.

Tabs

  • Home
  • Menu 1
  • Menu 2
  • Menu 3
Tabs are created amongst <ul class="nav nav-tabs">:
Tip: Also grade the electrical flow page amongst <li class="active">.
The next instance creates navigation tabs:

Example

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

Tabs With Dropdown Menu

  • Home
  • Menu 1
  • Menu 2
  • Menu 3
Tabs tin too concur dropdown menus.
The next instance adds a dropdown bill of fare to "Menu 1":

Example

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Submenu 1-1</a></li>
      <li><a href="#">Submenu 1-2</a></li>
      <li><a href="#">Submenu 1-3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

Pills

  • Home
  • Menu 1
  • Menu 2
  • Menu 3
Pills are created amongst <ul class="nav nav-pills">. Also grade the electrical flow page amongst <li class="active">:

Example

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

Vertical Pills

  • Home
  • Menu 1
  • Menu 2
  • Menu 3
Pills tin too live displayed vertically. Just add together the .nav-stacked class:

Example

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

Vertical Pills inwards a Row

Text...
Text...
Text...
  • Home
  • Menu 1
  • Menu 2
  • Menu 3
The next instance places the vertical pill bill of fare within the final column. So, on a large enshroud the bill of fare volition live displayed to the right. But on a small-scale screen, the content volition automatically conform itself into a single-column layout:

Example

<div class="col-md-3">
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

Pills With Dropdown Menu

  • Home
  • Menu 1
  • Menu 2
  • Menu 3
Pills tin too concur dropdown menus.
The next instance adds a dropdown bill of fare to "Menu 1":

Example

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Submenu 1-1</a></li>
      <li><a href="#">Submenu 1-2</a></li>
      <li><a href="#">Submenu 1-3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

Centered Tabs in addition to Pills

  • Home
  • Menu 1
  • Menu 2
  • Menu 3
To center/justify the tabs in addition to pills, purpose the .nav-justified class.
Note that on screens that are smaller than 768px, the listing items are stacked (content volition rest centered):

Example

<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

<!-- Centered Pills -->
<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

Toggleable / Dynamic Tabs

  • Home
  • Menu 1
  • Menu 2
  • Menu 3

HOME

Lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed practice eiusmod tempor incididunt ut labore et dolore magna aliqua.
To brand the tabs toggleable, add together the data-toggle="tab" attribute to each link. Then add together a .tab-pane bird amongst a unique ID for every tab in addition to roll them within a <div> chemical percentage amongst bird .tab-content.
If you lot desire the tabs to fade inwards in addition to out when clicking on them, add together the .fade bird to .tab-pane:

Example

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade inwards active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content inwards bill of fare 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content inwards bill of fare 2.</p>
  </div>
</div>

Toggleable / Dynamic Pills

The same code applies to pills; solely alter the data-toggle attribute to data-toggle="pill":

Example

<ul class="nav nav-pills">
  <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
  <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade inwards active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content inwards bill of fare 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content inwards bill of fare 2.</p>
  </div>
</div>


         

Comments

Post a Comment

Popular posts from this blog

What Are The Main Components of a Computer System

-
Each part has a purpose and this list will help give you a brief idea of what the purpose if for each. Tower: The tower or computer case is there to protect the components inside. The case works to protect the parts against electrical shock, dirt and other sources of danger that surround your computer. Power Supply: The power supply is found secure inside your tower and offers the main source of power to the motherboard and other components such as your hard drive and Rom drives. The power supply can be changed out for a larger wattage one to ensure better power and cooling to the parts installed on your system. Motherboard: The motherboard acts as the heart of the computer where everything ties into it and works from it. The slots on the motherboard are available for an assortment of components such as the CPU, memory, video, sound, TV tuners etc. CPU: The central processing unit, otherwise known simply as the CPU is the brains of the sy...
Read more

Top Qualities To Look For In An IT Support Team

-
Regardless of how "state of the art" or "updated" your company's technical systems may be, they will at one time or another encounter glitches or breakdowns that will require immediate attention. A company that experiences such issues must have an IT support team that they can turn to in order to acquire fixes and upgrades. Otherwise, a company will experience substantial "down time" or may even lose clients. This could result in life-long issues for the company and could ultimately result in a loss of profit. The best solution to avoid such detrimental issues is to obtain the services of an IT support provider that can prevent such situations from arising. You will need to take advantage of IT support London services that realize that your company will grow over time, and know how to adapt and maintain your technical services to keep up and manage this growth. Additionally, you will only want to deal with an IT su...
Read more

How To Integrate Google Adwords Api Into Codeigniter?

-
Image
One blogger gave me reckon Just add together all the api documents to the third_party folder in addition to ask the library from your controller or library in addition to voilà! Figure: Google Adwords API Hierarchy After many hours of searching, reading in addition to testing I was successful to integrate AdWords API PHP Client Library into Codeigniter 2.X. Step yesteryear footstep conduct on how to integrate Google Adwords API into Codeigniter. Google Adwords API into Codeigniter # Steps Description 1. Download AdWords API PHP Client Library This customer library makes it easier to write PHP applications that programmatically access the AdWords API or DoubleClick Ad Exchange Buyer API. I accept downloaded version 4.5.1( adwords_api_php_4.5.1 ) 2. Extract the compressed archive (.zip or .tar.gz) in addition to glue the src folder within codeigniter's third_party folder. Grab solely src folder fr...
Read more