I'm curious if anyone knows why the semantic Navbar <nav> element is housed outside the outer <div class="container"> ?
From the Bootstrap Navbar docs:
https://getbootstrap.com/components/#navbar
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-
expanded="false">
<span class="sr-only">Toggle navigation</span>
My understanding (I thought) was that, in order for Bootstrap to, erm, bootstrap, everything had to be in a container > row > col.
Having used it a bit now, I understand there are caveats and "it's not always that simple" so I'm trying to faithfully perform the ball-achingly tedious work involved in digging into my app's front-end, while also understanding what I'm doing.
Is the answer just as simple as (my guess), <nav> is a "special" element created to live "outside" normal containers due to their special use case (particularly in the case of site/app-wide navigation)?
Steps taken on my own:
Reviewed 10+ "Similar questions"
Spent time on getbootstrap.com
Checked w3schools
Googled "<nav>"
“My understanding (I thought) was that, in order for Bootstrap to, erm, bootstrap, everything had to be in a container > row > col” - for the bootstrap grid system to work - yes. But a navigation is usually not using the grid system to begin with; mostly you have a navigation that is independent from the grid, followed by the main page content that might be using the grid. – CBroe 1 min ago
This answered my question. Thanks.
This enables the navbar to stretch to full width - the .container within it constrains the nav elements themselves. Look at [https://getbootstrap.com/examples/theme/] you'll see the dark navbar strip is full-width.
There's nothing stopping you from making multiple full-width sections each with their own .container div inside. See [https://getbootstrap.com/examples/jumbotron/] for an example - the .jumbotron also has a child .container but the background stretches to full width.
Also, there is nothing special about a .navbar element that means it must sit outside the container, as this example shows: [https://getbootstrap.com/examples/carousel/].
So use a container where you want to set max width and make sure the grid system works.
Related
I searched several of the suggested questions that came up when typing this, but I couldn't find an answer to my problem.
I'm using Uikit V2, and I have a div with the Sticky component. Here:
<div class="uk-sticky" data-uk-sticky id="nvbr">
<nav class="uk-navbar-center">
<a class="uk-button" href="#pg5"><h3>Contact</h3></a>
<a class="uk-button" href="#pg6"><h3>AboutUs</h3></a>
<a class="uk-button" href="#pg3"<h3>Services</h3></a>
</nav>
</div>
This works fine on the full screen, but when I resize to a small screen, the bar gets very wide. I open then in the inspector in Chrome and I get this line:
<div class="uk-sticky-placeholder" style="height: 123px; margin:0px;">
Where would this be in my code and how can I fix it? I looked in Uikit and the Uikit.js.
(I should note, that when I am in Inspector, if I change that 123px to say 10px, it looks fine.)
Thanks all.
I think it just counts height based on collapsed elements in the viewport.
https://github.com/uikit/uikit/blob/v2/develop/src/js/components/sticky.js#L286
The thing I would do if I were on your place, I would hide navbar elements on smaller devices with conditional classes and prepare of canvas menu (take a look inside docs).
Or try to take over control with your own js script.
Having trouble with bootstraps collapse. I have 2 menu items, with a dropdown collapse. I'm trying to alternate/switch them so I DONT get to see both at the same time. I've tried using 'toggle:false' but that does't seem to be working with bootstrap.
Please see the codepen for a working demonstration. Currently am using data- tags to create the functionality.
I'm wondering whether the DOM treats the collapse functionality as 2 separate things and therefore doesn't correlate them together.
So I have
<div class="search-bar>...</div>
<div class="collapse" id="collapseExample">...</div>
<div class="collapse" id="collapseFilter">...</div>
Inside the search bar I have 2 anchor elements which trigger the collapse. And then a non-related drop-down.
<a id="search-button" data-toggle="collapse" href="#collapseExample">
<span class="icon-search"></span>Search
</a> <!--Simplified -->
So I'm not sure why BOTH dropdown collapse elements come down. I want it to work just like the accordion style
Thanks in advance.
You can force hiding other menu like this:
$("#search-button").click(function() {
$('#collapseFilter').collapse('hide');
});
$("#filter-button").click(function() {
$('#collapseExample').collapse('hide');
});
See JsFiddle of your demonstration. I hope it helps, Thanks
The code is written by a former front-end developer of my company. After he left, I was asked to edit this page. When I finished working on CSS, I found the affix which formerly worked, will always activate the last li element. I tried a lot of ways but have no idea why this is happening.
Example code:
<ul id="myNav" class="nav nav-tabs nav-stacked">
<li>关于Speed Dating</li>
<li>活动流程</li>
<li>成功案例</li>
<li>往期回顾</li>
<li>地点</li>
<li>合作伙伴</li>
</ul>
......
<h2 id="section-1">关于Speed Dating</h2>
<h2 id="section-2">关于Speed Dating</h2>
......
The whole code is on CodePen
Finally, I found it's because the former marked with attributes data-spy="scroll" data-target="#myScrollspy" was now on a div element.
I deleted the body tag because the former HTML has two body tag, the first one is set in the base template, and the second one is written in HTML to bind bootstrap affix. So bootstrap affix doesn't work after I change the second body tag to div.
TL,NR: It fixed after I add attributes data-spy="scroll" data-target="#myScrollspy" to body element.
I have some scripts based on JQuery and Bootstrap that allow me to make blocks of text display or not display, controlled by clicking the preceding header.
Here's an example of a header and text block stored in my database:
<h2 id="where" data-toggle="collapse" data-target=".Header2,.Where">Where am I?</h2>
<section class="ConSec Where">
<p>If you’ve ever worked in the Alaskan wilderness or explored Africa, you know how easy it is to get lost. (I’ve been temporarily lost three or four times – in fog, dense forests and in a blizzard on the Arctic Ocean.)</p>
</section>
My JavaScript skills are pretty weak, so I don't yet understand exactly how it works. I have some similar functions on my page that are controlled by this script:
<script>
$("#intro").click(function(e) {
e.preventDefault();
$("#intro,.ConSec").toggleClass("texted");
});
</script>
However, I can open and close blocks of text even if I delete the above script, so maybe it's controlled by CSS.
I would like to modify my code so that headers display up or down arrows, similar to Wikipedia's mobile pages; e.g. http://en.m.wikipedia.org/wiki/Mammal
If you scroll down to a header (e.g. "Distinguishing Features" or "Classification"), you'll see what I mean.
I'm not sure if those arrows are images or some sort of font characters. I wondered if anyone could tell me how to make something similar. I can probably figure out some way of doing it using images, but it would be pretty amateurish.
Try adding the following span to your h2:
<span class="glyphicon glyphicon-chevron-up"></span>
So it will look like...
<h2 id="where" data-toggle="collapse" data-target=".Header2,.Where">
<span class="glyphicon glyphicon-chevron-up"></span>
Where am I?
</h2>
You can find the codes for the different Bootstrap icons here: http://getbootstrap.com/components/
Just replace glyphicon-chevron-up with the one you want.
I would like to create my own accordion component without using any AJAX toolkits, mostly for learning purposes. I am not sure quite where to start with this one. I'm assuming I would begin by creating div's for each section in the accordion. Perhaps each div would contain a header, which would be the actual button selected to move the accordion to that section. I am not sure the correct approach to take once an accordion's section button is selected though. Would I use the z-order, so that each section is of a higher z-order? Any help is appreciated.
Thanks
I would highly recommend picking up a book such as John Resig's Pro JavaScript techniques that will give you some ideas and initial thoughts about how to approach bulding your own client-side solutions.
Essentially, you would have an element to act as a header, for example <h1> or <div> under which you would have a <div> with an initial style of display: none;. Set up an event handler on the click event of the header to change the style of the div below to display: block and ensuring that any other content <div>s are hidden (do this by using a CSS class on each content <div> for example).
I'll leave the smooth animation to you as an exercise for how it might be accomplished. As a hint, I would recommend looking at how a JavaScript library like jQuery handles animation, by checking out the source.
The best way to order it would be like this
<div id="accordion">
<h3 class="accordion title">Title</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 2</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 3</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 4</h3>
<div class="accordion section">
Section Content
</div>
</div>
You would want to avoid z-order entirely because it is a compatibility mess. Instead you would have the accordion titles be what you would click to open the accordion. You would want to set all of the accordion section <div>'s to visibility:hidden; by default, and then, when one of them is clicked, change it's visibility, and hide all the others. If you want it to work with any amount of accordion sections, you would have it count each <h3 class="accordion title"> and each <div class="accordion section">, and pair those up into an array. When a title is clicked, show it's corresponding div. Alternatively you could give each one a separate ID, but the first way would be much more useful.
Actually, it might be display:none; instead of visibility:hidden;, I would try both.
In addition it's worth mentioning that the animation is usually handled by changing things like the size of the div, so if you were hiding a section, you would make the height smaller and smaller until it reaches 0 and is hidden.
See this question, you will notice my answer contains a demo with the basic workings that should get you started. It was only asked a few minutes ago!
It uses jQuery.