I am trying to create following UI in bootstrap with responsive menu, can anyone provide me guide line how I can achieve this. Both top and side menu should be responsive.
Following is URL what I am trying to create.
In assuming that you know the basics of web design, I will give you the short explanation how the Bootstrap works.
Bootstrap is HTML, CSS and JS framework that handles the responsiveness AUTOMATICALLY. You must only include the libraries correctly and know which Bootstrap css-classes have you too include into your HTML tags.
For example, if you want to achieve the design part for search as in your drawing, you must do something like here in Bootstrap documentation
or for navbar.
I will give you quick hint for components structure of your problem (of course, there is a lot work in css :) ):
<!--The header-->
<div class="col-lg-12">
<div class="col-lg-12">
<div class="col-lg-3"> <!--Logo or whatever in top left side-->
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../Content/img/chrome_logo.jpeg" />
</a>
</div>
</div>
<div class="6"></div>
<div class="col-lg-3" style="float:right"> <!--Search input-->
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
<div class="col-lg-12" style="margin-left:40%" ><!-- Menu-->
<ul class="nav nav-pills">
<li role="presentation" class="active">Menu1</li>
<li role="presentation">Menu2</li>
<li role="presentation">Menu3</li>
<li role="presentation">Menu4</li>
</ul>
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-2">
//HTML PART FOR SIDEBAR
</div>
<div class="col-lg-10">
//HTML PART FOR MAIN CONTENT
</div>
</div>
You must wisely include exact col-lg, col-md, col-sm and col-xs classes to reach the responsiveness for each browser sizes.
One of the most important things also is to learn Boostrap grid system. This is unavoidable
for components organization.
Just practice as in documentation, learn the Bootstrap css-classes and organisations carefully and after are while, you will be able to design complexer stuffs.
I hope I theoretically covered everything what you need to design with Boostrap framework.
Related
I am making a single page site that has containers which act as stops from the navigation links at the top of the screen which you can read that particular containers information. I have a button to Read More and here is the problem.
I am working on a services page that has a overview of services but I am trying to get a button that the user can click to learn more but I would like that services.html file to load into that container without leaving the current location on the page ie the new information would slide in from the right so the user can read and once done they can close the loaded information and still be where they were currently at in the one page site. I hope that makes sense? Thank you for your help!
I have tried calling the page via a <li> tag and a href but I get information cant be loaded.
<section class="single-items center-block parallax" id="corporate" style="background-color: cadetblue">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-8 col-xs-11">
<div class="area-heading text-start wow fadeInLeft">
<h3 class="area-title text-capitalize alt-font text-white mb-2 font-weight-100">
<a data-fancybox="group-three" href="images/single-portfolio3.jpg">Complete <strong>Services</strong></a>
</h3>
<p class="text-white">For a full list click below</p>
<a class="btn btn-transparent-white btn-rounded btn-large mt-4" data-fancybox="group-three" href="images/single-portfolio3.jpg">View More</a>
</div>
</div>
<div class="col-md-7 col-sm-4 col-xs-1"></div>
</div>
</div>
<div class="hidden">
<a data-fancybox="group-three" data-thumb="images/gallery-thumb1.jpg" href="images/gallery-thumb1.jpg"></a>
<a data-fancybox="group-three" data-thumb="images/gallery-thumb2.jpg" href="images/gallery-thumb2.jpg"></a>
<a data-fancybox="group-three" data-thumb="images/gallery-thumb3.jpg" href="images/gallery-thumb3.jpg"></a>
<a data-fancybox="group-three" data-thumb="images/gallery-thumb4.jpg" href="images/gallery-thumb4.jpg"></a>
<a data-fancybox="group-three" data-thumb="images/gallery-thumb5.jpg" href="images/gallery-thumb5.jpg"></a>
</div>
I am trying to use Semantic UI Step (https://semantic-ui.com/elements/step.html) in my app, but can't figure out how to use it.
I understand the UI aspect of it, but can't figure out the following:
How can I change the <a class="active step"> whenever a user clicks on a step, and make other steps inactive?
How do I display different content in <div class="ui attached segment"> everytime a step is clicked?
How do I disable other steps while something is being processed in one of the steps?
I am new to semantic and web in general. I was thinking to use jQuery to get these components and update everything through that, but I am not sure if that's a good approach?
Can someone please suggest something with a code snippet? Thank you for your help!
This is the UI part of it from Semantic UI.
<div class="ui three top attached steps">
<a class="step">
<i class="truck icon"></i>
<div class="content">
<div class="title">Shipping</div>
<div class="description">Choose your shipping options</div>
</div>
</a>
<a class="active step">
<i class="payment icon"></i>
<div class="content">
<div class="title">Billing</div>
<div class="description">Enter billing information</div>
</div>
</a>
<a class="disabled step">
<i class="info icon"></i>
<div class="content">
<div class="title">Confirm Order</div>
<div class="description">Verify order details</div>
</div>
</a>
</div>
<div class="ui attached segment">
<p></p>
</div>
If you and an id to each step like stepShip, stepBill and stepConfirm
<a id="stepShip" class="step">
A function like this
var setStep = function(id){
$('#'+id).addClass('active').nextAll().addClass('disabled').removeClass('active');
};
Can then be called at start up like this
setStep("stepConfirm");
or attached to the steps like this
$('.step').click(function(){setStep($(this).attr('id'));})
I have a twitter bootstrap tabs component where i have five tabs.I want 3 of the tabs to be part of a form and the 4th, 5th not be.
So I thought, I'll just wrap the 3 tabs in a form.But it does not work. I have already checked How to wrap a selection of twitter bootstrap tabs as one form? this thread and from the first answer got two issues. Since in the 2nd answer issues are explained but i am expecting better solution using js and without modifying bootstrap core file.
I am using twitter bootstrap 3.3.2. How can I fix this?
Here is the sample code:
<div class="row">
<div class="col-lg-12 animated-panel zoomIn" style="animation-delay: 0.4s;">
<div class="hpanel">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">First</li>
<li class="">Second</li>
<li class="">Third</li>
<li class="">Fourth</li>
<li class="">Fifth</li>
</ul>
<div class="tab-content">
<form>
<div class="tab-pane active" id="tab-1">
<div class="panel-body">First tab fields
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="panel-body">Second tab fiels
</div>
</div>
<div class="tab-pane" id="tab-3">
<div class="panel-body">Third tab fields
</div>
</div>
</form>
<div class="tab-pane" id="tab-4">
<div class="panel-body">Fourth tab content
</div>
</div>
<div class="tab-pane" id="tab-5">
<div class="panel-body">Fifth tab content
</div>
</div>
</div>
</div>
</div>
</div>
I guess since bootstraps javascript conflicts with this kind of form placing you need to build an (dirty) workaround if you really want to use bootstraps tabs with this kind of form-placing.
You could place inside each of the first three tabs an single form and copy (only for submitting) the content of the other forms into the form submitted.
#lonesomeday mentions a way to intercept submitting forms
So you could do something like
$(document).on('submit', '.tab-pane:lt(3) form', function(e){
e.preventDefault();
$('.tab-pane:lt(3) form').not($(this)).children().clone().addClass('toRemove').hide().appendTo($(this));
this.submit();
$('.toRemove').remove();
});
Note: I did not test the code above
If your submit-button/trigger is outside of the tab-structure you could just copy the contents of the three tabs into an hidden form anywhere on the page and submit this one.
Another way would be to invoke jQuery's ajax without using forms.
The following accordion code is not working properly for me.
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion1" href="#note1">
Foo
</a>
</div>
<div class="accordion-body collapse" id="note1">
<div class="accordion-inner">
<pre>Foo body</pre>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion1" href="#note2">
Bar
</a>
</div>
<div class="accordion-body collapse" id="note2">
<div class="accordion-inner">
<pre>Bar body</pre>
</div>
</div>
</div>
</div>
It displays and the items expand properly, but the items won't collapse. When I click an open item, it collapses briefly, and then expands again. I've seen this behavior on Bootstrap versions 2.1.0 and 2.1.1. Also, I'm using jQuery 1.7.2 and 1.8.2 and viewing in Chrome 22.
The problem ended up being that I had accidentally included all my javascript script files twice. Removing the duplicate fixed everything. I don't know how common this mistake is, but if someone else has this problem in the future, then it might be helpful to have this answer rather than just deleting the question.
I had the same problem. The problem was that I loaded jQuery after bootstrap.
I had a similar silly problem. I forgot to add the script tags to include Bootstrap JS functionality... Make sure you include the Bootstrap CSS files (link) and the JS files (link). You actually do need both.
I'm having trouble and I am not sure on how to tackle this problem.
I have a Spry Tabbed Panels Widget with content. I know that the 3-level, 5-container structure is essential for the Tabbed Panels widget to work properly, but I would like to add one more level (the container class below the main div), like this:
<div id="TabbedPanels1" class="TabbedPanels">
<div class="content">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Home</li>
<li class="TabbedPanelsTab" tabindex="0">Profile/li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
</div>
</div>
</div>
As far as I understand, in order to get this to work properly, I would have to modify the widget core. Can anyone point me in the right direction or help me modify the widget core?
Many thanks in advance!!
<div id="TabbedPanels1" class="TabbedPanels">
would work as
<div id="TabbedPanels1" class="TabbedPanels content">
so there is no need for another div layer...