Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-29 14:34:37 +04:00
Code Issues Projects Releases Wiki Activity

topnav refactoring

Browse Source
This commit is contained in:
codecalm
2019-10-27 13:09:59 +01:00
parent 4fb196579f
commit 704f3653dd
68 changed files with 607 additions and 747 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_docs/alerts.md
+1 -1
View File
@@ -25,7 +25,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
{% example %}
{% for variant in site.variants %}
{% capture variant-text %}
This is a {{ variant.name }} alert — <a href="javascript:void(0)" class="alert-link">check it out</a>!
This is a {{ variant.name }} alert — <a href="#" class="alert-link">check it out</a>!
{% endcapture %}
{% include ui/alert.html type=variant.name text=variant-text %}
{% endfor %}
pages/_docs/badges.md
+2 -2
View File
@@ -36,7 +36,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
{% example %}
{% for color in site.colors %}
<a href="javascript:void(0)" class="badge bg-{{ color[0] }}">{{ color[0] }}</a>
<a href="#" class="badge bg-{{ color[0] }}">{{ color[0] }}</a>
{% endfor %}
{% endexample %}
@@ -45,6 +45,6 @@ A small count and labeling component. Please read the [official Bootstrap docume
{% example %}
{% for color in site.colors %}
<a href="javascript:void(0)" class="badge bg-{{ color[0] }}"></a>
<a href="#" class="badge bg-{{ color[0] }}"></a>
{% endfor %}
{% endexample %}
pages/_docs/buttons.md
+39 -39
View File
@@ -10,7 +10,7 @@ description: Use Bootstrap’s custom button styles for actions in forms, dialog
The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
{% example html wrapper=btn-list %}
<a href="javascript:void(0)" class="btn btn-primary" role="button">Link</a>
<a href="#" class="btn btn-primary" role="button">Link</a>
<button class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Input" />
<input type="submit" class="btn btn-primary" value="Submit" />
@@ -23,9 +23,9 @@ Use any of the available button classes to quickly create a styled button . We p
{% example html wrapper=btn-list %}
{% for button in site.button_variants %}
<a href="javascript:void(0)" class="btn btn-{{ button.name }}">{{ button.title }}</a>
<a href="#" class="btn btn-{{ button.name }}">{{ button.title }}</a>
{% endfor %}
<a href="javascript:void(0)" class="btn btn-link">Link</a>
<a href="#" class="btn btn-link">Link</a>
{% endexample %}
### Disabled buttons
@@ -45,7 +45,7 @@ The classic button, in different colors.
{% example html wrapper=btn-list %}
{% for button in site.colors %}
<a href="javascript:void(0)" class="btn btn-{{ button[0] }}">{{ button[1].name }}</a>
<a href="#" class="btn btn-{{ button[0] }}">{{ button[1].name }}</a>
{% endfor %}
{% endexample %}
@@ -163,8 +163,8 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
<i class="icon fe fe-calendar"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
@@ -173,8 +173,8 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
<i class="icon fe fe-calendar mr-2"></i>Show calendar
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
@@ -183,8 +183,8 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
Show calendar
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
{% endexample %}
@@ -209,9 +209,9 @@ You can now create a list of buttons with the `.btn-list` container.
{% example html %}
<div class="btn-list">
<a href="javascript:void(0)" class="btn btn-success">Save changes</a>
<a href="javascript:void(0)" class="btn btn-secondary">Save and continue</a>
<a href="javascript:void(0)" class="btn btn-danger">Cancel</a>
<a href="#" class="btn btn-success">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-danger">Cancel</a>
</div>
{% endexample %}
@@ -219,25 +219,25 @@ If the list is very long, it will automatically wrap on multiple lines, while ke
{% example html %}
<div class="btn-list">
<a href="javascript:void(0)" class="btn btn-secondary">One</a>
<a href="javascript:void(0)" class="btn btn-secondary">Two</a>
<a href="javascript:void(0)" class="btn btn-secondary">Three</a>
<a href="javascript:void(0)" class="btn btn-secondary">Four</a>
<a href="javascript:void(0)" class="btn btn-secondary">Five</a>
<a href="javascript:void(0)" class="btn btn-secondary">Six</a>
<a href="javascript:void(0)" class="btn btn-secondary">Seven</a>
<a href="javascript:void(0)" class="btn btn-secondary">Eight</a>
<a href="javascript:void(0)" class="btn btn-secondary">Nine</a>
<a href="javascript:void(0)" class="btn btn-secondary">Ten</a>
<a href="javascript:void(0)" class="btn btn-secondary">Eleven</a>
<a href="javascript:void(0)" class="btn btn-secondary">Twelve</a>
<a href="javascript:void(0)" class="btn btn-secondary">Thirteen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Fourteen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Fifteen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Sixteen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Seventeen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Eighteen</a>
<a href="javascript:void(0)" class="btn btn-secondary">Nineteen</a>
<a href="#" class="btn btn-secondary">One</a>
<a href="#" class="btn btn-secondary">Two</a>
<a href="#" class="btn btn-secondary">Three</a>
<a href="#" class="btn btn-secondary">Four</a>
<a href="#" class="btn btn-secondary">Five</a>
<a href="#" class="btn btn-secondary">Six</a>
<a href="#" class="btn btn-secondary">Seven</a>
<a href="#" class="btn btn-secondary">Eight</a>
<a href="#" class="btn btn-secondary">Nine</a>
<a href="#" class="btn btn-secondary">Ten</a>
<a href="#" class="btn btn-secondary">Eleven</a>
<a href="#" class="btn btn-secondary">Twelve</a>
<a href="#" class="btn btn-secondary">Thirteen</a>
<a href="#" class="btn btn-secondary">Fourteen</a>
<a href="#" class="btn btn-secondary">Fifteen</a>
<a href="#" class="btn btn-secondary">Sixteen</a>
<a href="#" class="btn btn-secondary">Seventeen</a>
<a href="#" class="btn btn-secondary">Eighteen</a>
<a href="#" class="btn btn-secondary">Nineteen</a>
</div>
{% endexample %}
@@ -245,23 +245,23 @@ Use the `.text-center` or the `.text-right` modifiers to alter the alignment.
{% example html %}
<div class="btn-list text-center">
<a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
<a href="javascript:void(0)" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
</div>
{% endexample %}
{% example html %}
<div class="btn-list text-right">
<a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
<a href="javascript:void(0)" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
</div>
{% endexample %}
### Button with avatar
{% example html%}
<a href="javascript:void(0)" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar</a>
<a href="javascript:void(0)" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar</a>
<a href="javascript:void(0)" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar</a>
<a href="#" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="4" class="btn-avatar" %} Avatar</a>
<a href="#" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="5" class="btn-avatar" %} Avatar</a>
<a href="#" class="btn btn-secondary mr-2">{% include ui/avatar.html person-id="6" class="btn-avatar" %} Avatar</a>
{% endexample %}
pages/_docs/cards.md
+6 -6
View File
@@ -95,14 +95,14 @@ You can also add the image on the left side of the card. All you need do to is:
<a class="media-content " style="background-image:url({% include ui/image.html id=7 %})">
</a>
<div class="media-overlay overlay-top">
<a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-yellow">NATURE</span></a>
<a href="#"><span class="badge badge-md text-uppercase bg-yellow">NATURE</span></a>
</div>
<div class="media-action ">
</div>
</div>
<div class="card-body d-flex flex-column">
<div class="flex-fill ">
<a href="javascript:void(0)" class="card-title text-md">
<a href="#" class="card-title text-md">
It’s 2018, and the race is on between tech giants to decide who will control what you see every time you open your eyes
</a>
<a class="text-muted mt-2 ">What Not To Wear: The Hats, Scarves In History</a>
@@ -127,11 +127,11 @@ You can also add the image on the left side of the card. All you need do to is:
<div class="card-body d-flex flex-column ">
<div class="flex-fill ">
<div class="mb-3">
<a href="javascript:void(0)">
<a href="#">
<span class="badge badge-md text-uppercase bg-danger">Fashion</span>
</a>
</div>
<a href="javascript:void(0)" class="card-title h-2x">
<a href="#" class="card-title h-2x">
What Not To Wear: The Hats, Scarves In History
</a>
</div>
@@ -151,14 +151,14 @@ You can also add the image on the left side of the card. All you need do to is:
<div class="media media-4x3 col-4">
<a class="media-content" style="background-image:url({% include ui/image.html id=6 %})"></a>
<div class="media-overlay overlay-top">
<a href="javascript:void(0)"><span class="badge badge-md text-uppercase bg-white-overlay">MUSIC</span></a>
<a href="#"><span class="badge badge-md text-uppercase bg-white-overlay">MUSIC</span></a>
</div>
<div class="media-action ">
</div>
</div>
<div class="card-body d-flex flex-column">
<div class="flex-fill">
<a href="javascript:void(0)" class="card-title text-md">
<a href="#" class="card-title text-md">
Radio Listeners Prepare For An Impending Alien Invasion In This Visually Stunning Short Film
</a>
<a class="text-muted mt-2">What Not To Wear: The Hats, Scarves In History</a>
pages/_docs/form-elements.md
+7 -7
View File
@@ -167,14 +167,14 @@ title: Form Elements
<button data-toggle="dropdown" type="button"
class="btn btn-primary dropdown-toggle"></button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void(0)">
<a class="dropdown-item" href="#">
News
</a>
<a class="dropdown-item" href="javascript:void(0)">
<a class="dropdown-item" href="#">
Messages
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">
<a class="dropdown-item" href="#">
Edit Profile
</a>
</div>
@@ -276,11 +276,11 @@ title: Form Elements
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">