From e0addf5b588a1244f9679becd90999dfcb4c3a94 Mon Sep 17 00:00:00 2001 From: "ITSERVICES\\rb7147" Date: Tue, 25 Apr 2017 11:46:00 -0400 Subject: Policy 1707 commit to LF Change-Id: Ibe6f01d92f9a434c040abb05d5386e89d675ae65 Signed-off-by: ITSERVICES\rb7147 --- .../bootstrap/docs/_includes/components/navs.html | 189 +++++++++++++++++++++ 1 file changed, 189 insertions(+) create mode 100644 POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/navs.html (limited to 'POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/navs.html') diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/navs.html b/POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/navs.html new file mode 100644 index 000000000..2e41e57cf --- /dev/null +++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/navs.html @@ -0,0 +1,189 @@ +
+

Navs

+ +

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

+ +
+

Using navs for tab panels requires JavaScript tabs plugin

+

For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional role and ARIA attributes – see the plugin's example markup for further details.

+
+ +
+

Make navs used as navigation accessible

+

If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.

+
+ + +

Note the .nav-tabs class requires the .nav base class.

+
+ +
+{% highlight html %} + +{% endhighlight %} + + + +

Take that same HTML, but use .nav-pills instead:

+
+ +
+{% highlight html %} + +{% endhighlight %} +

Pills are also vertically stackable. Just add .nav-stacked.

+
+ +
+{% highlight html %} +
    + ... +
+{% endhighlight %} + + + +

Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

+

Justified navbar nav links are currently not supported.

+
+

Safari and responsive justified navs

+

As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.

+
+
+ +
+ +
+{% highlight html %} +
    + ... +
+
    + ... +
+{% endhighlight %} + + + +

For any nav component (tabs or pills), add .disabled for gray links and no hover effects.

+ +
+

Link functionality not impacted

+

This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.

+
+ +
+ +
+{% highlight html %} + +{% endhighlight %} + + + +

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

+ +

Tabs with dropdowns

+
+ +
+{% highlight html %} + +{% endhighlight %} + +

Pills with dropdowns

+
+ +
+{% highlight html %} + +{% endhighlight %} +
-- cgit 1.2.3-korg