mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-18 12:39:41 +03:00
rearrange docs components
This commit is contained in:
Mark Otto
@@ -1,85 +0,0 @@
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="alerts" class="page-header">Alerts</h1>
|
||||
|
||||
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#alerts">alerts jQuery plugin</a>.</p>
|
||||
|
||||
<h2 id="alerts-examples">Examples</h2>
|
||||
<p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>No default class</h4>
|
||||
<p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="alert alert-success" role="alert">
|
||||
<strong>Well done!</strong> You successfully read this important alert message.
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<strong>Warning!</strong> Better check yourself, you're not looking too good.
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<strong>Oh snap!</strong> Change a few things up and try submitting again.
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="alert alert-success" role="alert">...</div>
|
||||
<div class="alert alert-info" role="alert">...</div>
|
||||
<div class="alert alert-warning" role="alert">...</div>
|
||||
<div class="alert alert-danger" role="alert">...</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h2 id="alerts-dismissible">Dismissible alerts</h2>
|
||||
<p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
|
||||
<div class="bs-example">
|
||||
<div class="alert alert-warning alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<strong>Warning!</strong> Better check yourself, you're not looking too good.
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="alert alert-warning alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
<strong>Warning!</strong> Better check yourself, you're not looking too good.
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Ensure proper behavior across all devices</h4>
|
||||
<p>Be sure to use the <code><button></code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="alerts-links">Links in alerts</h2>
|
||||
<p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
|
||||
<div class="bs-example">
|
||||
<div class="alert alert-success" role="alert">
|
||||
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="alert alert-success" role="alert">
|
||||
<a href="#" class="alert-link">...</a>
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<a href="#" class="alert-link">...</a>
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<a href="#" class="alert-link">...</a>
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<a href="#" class="alert-link">...</a>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
@@ -1,72 +0,0 @@
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="badges" class="page-header">Badges</h1>
|
||||
|
||||
<p class="lead">Easily highlight new or unread items by adding a <code><span class="badge"></code> to links, Bootstrap navs, and more.</p>
|
||||
|
||||
<div class="bs-example">
|
||||
<a href="#">Inbox <span class="badge">42</span></a>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<a href="#">Inbox <span class="badge">42</span></a>
|
||||
{% endhighlight %}
|
||||
|
||||
<h4>Self collapsing</h4>
|
||||
<p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Cross-browser compatibility</h4>
|
||||
<p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>
|
||||
</div>
|
||||
|
||||
<h4>Adapts to active nav states</h4>
|
||||
<p>Built-in styles are included for placing badges in active states in pill navigations.</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
|
||||
<li role="presentation"><a href="#">Profile</a></li>
|
||||
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
|
||||
</ul>
|
||||
<br>
|
||||
<ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 260px;">
|
||||
<li role="presentation" class="active">
|
||||
<a href="#">
|
||||
<span class="badge pull-right">42</span>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation"><a href="#">Profile</a></li>
|
||||
<li role="presentation">
|
||||
<a href="#">
|
||||
<span class="badge pull-right">3</span>
|
||||
Messages
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<br>
|
||||
<p>
|
||||
<button class="btn btn-primary btn-lg" type="button">
|
||||
Large button <span class="badge">4</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button">
|
||||
Button <span class="badge">4</span>
|
||||
</button>
|
||||
<button class="btn btn-primary btn-sm" type="button">
|
||||
Small button <span class="badge">4</span>
|
||||
</button>
|
||||
<button class="btn btn-primary btn-xs" type="button">
|
||||
Extra small <span class="badge">4</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-pills nav-stacked" role="tablist">
|
||||
<li role="presentation" class="active">
|
||||
<a href="#">
|
||||
<span class="badge pull-right">42</span>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
...
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
@@ -1,98 +0,0 @@
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="dropdowns" class="page-header">Dropdowns</h1>
|
||||
|
||||
<p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
|
||||
|
||||
<h3 id="dropdowns-example">Example</h3>
|
||||
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
|
||||
<div class="bs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="dropdowns-alignment">Alignment</h3>
|
||||
<p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>May require additional positioning</h4>
|
||||
<p>Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain <code>overflow</code> properties or appear out of bounds of the viewport. Address these issues on your own as they arise.</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
|
||||
...
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="dropdowns-headers">Headers</h3>
|
||||
<p>Add a header to label sections of actions in any dropdown menu.</p>
|
||||
<div class="bs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
|
||||
<li role="presentation" class="dropdown-header">Dropdown header</li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation" class="dropdown-header">Dropdown header</li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
|
||||
<li role="presentation" class="dropdown-header">Dropdown header</li>
|
||||
...
|
||||
<li role="presentation" class="divider"></li>
|
||||
<li role="presentation" class="dropdown-header">Dropdown header</li>
|
||||
...
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="dropdowns-disabled">Disabled menu items</h3>
|
||||
<p>Add <code>.disabled</code> to a <code><li></code> in the dropdown to disable the link.</p>
|
||||
<div class="bs-example">
|
||||
<div class="dropdown clearfix">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
|
||||
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
|
||||
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
|
||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
@@ -1,235 +0,0 @@
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="nav" class="page-header">Navs</h1>
|
||||
|
||||
<p class="lead">Navigation available in Bootstrap share general markup and styles, from the base <code>.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
|
||||
|
||||
<h2 id="nav-base">Base nav</h2>
|
||||
<p>Roll your own navigation style by extending the base <code>.nav</code> component. All Bootstrap's nav components are built on top of this. Includes styles for the disabled state, but <strong>not the active state</strong>.</p>
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item disabled">
|
||||
<a class="nav-link" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
<p>Classes are used so your markup can be super flexible.</p>
|
||||
<div class="bs-example">
|
||||
<nav class="nav" role="tablist">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<nav class="nav" role="tablist">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id="nav-tabs">Tabs</h2>
|
||||
<p>Takes the basic nav from above and adds the <code>.nav-tabs</code> class to generate a tabbed interface.</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li role="presentation" class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li role="presentation" class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Requires JavaScript tabs plugin</h4>
|
||||
<p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="nav-pills">Pills</h2>
|
||||
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<li role="presentation" class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<li role="presentation" class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
<h2 id="nav-pills-stacked">Stacked pills</h2>
|
||||
<p>Just add <code>.nav-stacked</code>.</p>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-pills nav-stacked" role="tablist">
|
||||
<li role="presentation" class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-pills nav-stacked" role="tablist">
|
||||
<li role="presentation" class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id="nav-dropdowns">Using dropdowns</h2>
|
||||
<p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
|
||||
|
||||
<h3>Tabs with dropdowns</h3>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li role="presentation" class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
...
|
||||
<li role="presentation" class="nav-item">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
Dropdown
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
...
|
||||
</ul>
|
||||
</li>
|
||||
...
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Pills with dropdowns</h3>
|
||||
<div class="bs-example">
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<li role="presentation" class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li role="presentation" class="nav-item">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
...
|
||||
<li role="presentation" class="nav-item">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
Dropdown
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
...
|
||||
</ul>
|
||||
</li>
|
||||
...
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
Reference in New Issue
Block a user