I am trying to figure out how I can implement a tabbed site similar to the image below. Does anyone know/recognize this template or can guide me on how I can design something similar with bootstrap and css?
Bootstrap has a javascript tab plugin included to change tabs on clicking. You can checkout https://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior
If you want the pages to load a new page on clicking you could do something like (I've used font awesome for the icons here)
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="/sourcing"><i class="fa fa-pie-chart"></i>Sourcing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/people"><i class="fa fa-user-o"></i>People</a>
</li>
</ul>
In bootstrap 4 this would get the basic example working and you could play around with the CSS to change the look of each a when it has the "active" class
Related
How to change that black box shadow color to another color when we switch nav tabs by using Tab key?
The code:
<ul class="nav nav-tabs m-5">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
EDIT as of December 1st 2022 (Chrome v107.0.5304.121)
It has nothing to do with Bootstrap. It was asked before.
This happens because of the Chrome v83 update and people don't like it.
Seems like in the past it was possible to disable black border when using ↹ (i.e., Tab key) the following ways:
disable Web Platform Controls updated UI (source)
disable this flag: chrome://flags/#form-controls-refresh (source) or
go to chrome://settings/accessibility and disable Show a quick highlight on the focused object (source).
I was searching for a while, but was unable to disable black border in Chrome v107.0.5304.121.
Google says the black border is back and seems like there’s no way to get rid of it.
This is a WordPress site using Colorlib's Shapely Theme and the Shapely Companion plugin. (Note: This is a bootstrap theme, and uses bootstrap-navwalker. I am also using a child theme to customise the site.)
The site can be found here: www.brightongate.com.au
The font-awesome angle-down arrow used to display on the menu line, next to the Home page link. At some point it stopped showing the arrow, and instead only shows a small rectangle box with the unicode inside: f107. (Note: I haven't done any changes myself to this site for a long time - outside of updating plugins, etc.)
Here is the relevant code:
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menu" class="menu">
<li id="menu-item-1033" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-642 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-1033 dropdown active">
<a title="Home" href="http://www.brightongate.com.au/">Home </a>
<span class="dropdown-toggle shapely-dropdown" data-toggle="dropdown">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item-1233" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-642 current_page_item menu-item-1233 active">
<a title="[ Welcome to Brighton Gate - home page ]" href="http://www.brightongate.com.au/">[ Welcome to Brighton Gate – home page ]</a>
</li>
</ul>
</li>
<li id="menu-item-1021" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1021">
<a title="Log In" href="http://www.brightongate.com.au/login/">Log In</a>
</li>
</ul>
</div>
Using inspect on the home menu item, you can see that the span surrounding the font-awesome code is grayed out, making it look like it isn't being executed:
<span class="dropdown-toggle shapely-dropdown" data-toggle="dropdown"><i class="fa fa-angle-down" aria-hidden="true"></i></span>
According to others (posted online) that have similar issues (with font-awesome icons not displaying drop-down icon), it appears that the problem might either be that the font family isn’t correct (ie: Font Awesome 5 Free) or that the incorrect all.min.css file has been uploaded.
I have tried to verify both of these possible issues as follows:
Still looking with inspect, clicking on the line of i class code, I can see that the class fa is defined using the correct font-weight & font-family:
.fa, .fas {
font-weight: 900;
}
.fa, .far, .fas {
font-family: "Font Awesome 5 Free";
}
Looking at the Shapely function.php file, you can see that it includes the font-awesome css file:
// Add Font Awesome stylesheet
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/assets/css/font-awesome.min.css' );
And also from View Source I can see the font-awesome css is indeed brought in (showing a version of 5.9.5)
<link rel='stylesheet' id='font-awesome-css' href='http://www.brightongate.com.au/wp-content/themes/shapely/assets/css/fontawesome/all.min.css?ver=5.9.5' type='text/css' media='all' />
Can someone see any other issues why the span code surrounding the font-awesome drop-down icon isn't being executed?
Or is there a way to verify that I have the correct version of the all.min.css file being used?
Thanks for any help on this matter.
Sunny Oz
This issue often occurs when the theme or other files are outdated,
You can solve this problem with a Wordpress plugin by Font Awesome,
It is free and it definitely solves your problem.
I am migrating to bootstrap4 from bootstrap 3.
To work well, I must markup the menus with HTML like this:
<ul class="dropdown-menu">
<li><a class="nav-item nav-link" href="foo">Foo</a></li>
<li><a class="nav-item nav-link" href="bar">Bar</a></li>
.
.
.
</ul>
where each element gets the same classes.
This is a part of a jinja2 template in Django.
It seems tedious to "decorate" each tag with class="nav-item nav-link"
I didn't need to do this with the bootstrap3 code (which I inherited and I know little about this)
Is there a different way of doing this?
If you are using VSCode you can use shortcut ctrl+alt+DownArrow to duplicate coursor to bottom lines and edit multiple in the same time.
Note: I am using the INSPINIA administrative theme and this question is an extension of the following question: How do I install bootstrap 4 template to Ember web project?
How do I get css animations working in Ember?
I am attempting to get the collapse-able sidebar navigation menu working (see the INSPINIA link here). Currently, I do not see the arrow and the menu is displayed only in expanded form in the <ul class="nav nav-second-level">...</ul> block of code.
In looking at the sample projects and View Source page, there appear to be a lot of add-ons that INSPINIA uses. Do I need to install all of them? Or, do I just need jQuery?
Here is the code for my handlebar file in question.
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
{{#if session.isAuthenticated}}
<li class="active"><i class="fa fa-th-large"></i> <span class="nav-label">Client</span> <span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Update Information</li>
<li>{{#link-to "clients.change-password"}}Change Password{{/link-to}}</li>
<li><a href="#" onclick={{action "logout"}}>Logout</a></li>
</ul>
</li>
{{else}}
<li>{{#link-to "clients.login"}}Login{{/link-to}}</li>
<li>{{#link-to "clients.register"}}Register{{/link-to}}</li>
{{/if}}
<li>{{#link-to "misc.about"}}About{{/link-to}}</li>
<li>{{#link-to "misc.contactus"}}Contact Us{{/link-to}}</li>
</ul>
</div>
</nav>
I'd suggest using Liquid Fire.
Liquid Fire is a toolkit for managing animated transitions in an Ember application.
You can use the transition.js file to manage the duration, direction, timing etc. of CSS transitions in your app.
You may use Ember Animated if you need more control over your animations.
I want to present Tabs using Bootstrap 4 with bootstrap-native-v4 within an Angular 2 application. (I am including bootstrap-native-v4 via the angular.json file 'scripts' value "./node_modules/bootstrap.native/dist/bootstrap-native-v4.min.js" - note I can see bootstrap-native-v4 included within the source [scripts.js file] when viewed thru the Chrome Developer Tools)
I am using localhost:4200/myfolder to run my application locally however for the code below, when I hover-over/click the tabs the URL defaults to localhost:4200/#home (instead of localhost:4200/myfolder#home), localhost:4200/#profile (instead of localhost:4200/myfolder#profile), etc.
So what happens is that the page does a post back to a none existent URL
I've tried setting the BaseURL in the head, however although this fixes the URL issue the page doesn't refresh the content when I click on the tabs. I've also tried to set the href of each anchor to myfolder#home, myfolder#profile, etc however again although this fixes the URL issue (no postback), the tab content doesn't refresh
I really want to avoid using JQuery (hence the use of bootstrap-native-v4) - most/all of the examples seem to use JQuery - I am trying to go via Data API (JS within the bootstrap-native-v4 scope is OK tho)
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist" data-tabs="tabs">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">a...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">b...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">c...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">d...</div>
</div>
I am wanting the code to not postback to the server and to simply switch between tabs showing the corresponding tab's content
Can anyone help ?
BSN developer here. I want to say this: I'm no Angular expert, but I can tell my library goes away from traditional jQuery methods, events and plugin structure, you need to think Native JavaScript FIRST.
Supposing you're working with fully dynamic content, where content is added/changed/removed later into/from the DOM, you can try to work with it following the documentation:
init each of your newly added tabs with var myTab[N] = new Tab(element,options); (myTab[N]/myTab1 is the initialization object to work with)
interact with your object via method, EG myTab[N].show();
dispose the object via myTab[N] = null; then remove its respective tab+tabContent from the DOM
the Tab component (as well as all others in the library) does NOT handle #myTab URL navigation
Check the documentation and wiki for more info, you might find some guides to help you hopefully.