I have probably a simple question for someone with bootstrap experience. On this page: http://limitedwave.com/watsonmetals/site/, in the first section just under the nav bar I have 4 'zones'. One house a logo, directly under it some text in a box, to the right of both a large navigation grid, and under that an 'extra row' below the grid only.
I'm not laying this out properly on the bootstrap grid and I'd like to. I have the content in divs that are more or less stacked and floated with css and heavy margin manipulation to make it look as it does. Am i wrong in assuming bootstrap can layout these divs more like a table via its grid? Perhaps this might also help with the fact that as soon as I resize my browser to the next smaller size from full width mac pro size, the logo and text shift right.
<section id="intro" data-speed="2" data-type="background">
<div class="container">
<div class="row-fluid">
<div id="welcome-screen" class="span16 text-left">
<div id="lrail">
<div id="logocontainer">
<img id="logo" src="img/logo-watson.png" alt="Watson Metals, LLC." width="130" />
</div>
<div id="welcome-box" class="span3 text-right">
Watson Metals manufactures quality metal building panels, for roof, siding, accessories for all building applications. We offer a pole barn package, steel siding or metal roofing for your personal specifications and needs.<br><br>
With an array of metal panel profiles such as Tuff-Rib, R-Panel, and our standing seam profile, we can provide material for almost any application. Our standing seam profile is available in either 12” or 16” widths and can be conveniently produced on your jobsite using our portable roll-former.
</div>
</div>
<div class="span12 text-center">
<div id="main-interface-container">
<ul id="interface-list">
<li><a class="link1" href="link1.php">Roofing Panels</a></li>
<li><a class="link2" href="link2.php">Post Frame Buildings</a></li>
<li><a class="link3" href="link3.php">Other Products</a></li>
<li><a class="link4" href="link4.php">Custom Trim</a></li>
<li><a class="link5" href="link5.php">Warranties and Information</a></li>
<li><a class="link6" href="link6.php">Frequently Asked Questions</a></li>
<li><a class="link7" href="link7.php">Energy Star</a></li>
<li><a class="link8" href="link8.php">About Our Company</a></li>
<li><a class="link9" href="link9.php">Contact Us</a></li>
<li><img id="home-locations" src="img/watson-locations.png" alt="Locations" /></li>
</ul>
</div>
</div>
<div class="span8 text-center"><span class="copyright">Copyright © 2013 Watson Metals LLC., All Rights Reserved.</span></div>
</div>
</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</section>
http://twitter.github.io/bootstrap/scaffolding.html#gridSystem
Bootstrap's documentation is pretty solid.
The standard container->row->span# should work just fine for that grid. It should also take care of the responsiveUi issues you were having with the smaller screen.
Related
I have a sidebar for searching, and main content to the right of the sidebar. I want the sidebar to remain approx the same width, while the main content can shrink horizontally when the browser window is shrinking horizontally. I am using the Bootstrap 4 grid system to accomplish this. In addition, I am using flex to enable row wrapping. The grid system responsive width works ok, up until the browser shrinks to approx "col-6" size, upon which any further shrinking DOES NOT yield row wrap. I want row wrap at the smallest width to accommodate small devices. How can I achieve this (code below)? I am very new at using bootstrap and flex in general. I am a backend developer dipping my toes into responsive web design. Please advise.
Also, please note that this is not about a "fixed sidebar", at least not yet, as that is instead a sidebar that is fixed during scrolling vertically. I am interested in horizontal responsiveness.
<div class="container">
<div class="d-flex flex-row flex-wrap">
<div id="search" class=" col-6 col-sm-5 col-md-4 col-lg-3 col-xl-3">
<h4 id="searchTitle">Search Criteria</h4>
<div id="searchCriteria">
a form goes here ...
</div>
</div>
<div id="searchResultsColumn" class="col-6 col-sm-7 col-md-8 col-lg-9 col-xl-9">
<h4 id="resultTitle">Search Results</h4>
<div id="searchResultsRows">
search results go here ...
</div>
</div>
</div>
I assume col-6 in a 12 grid system will yield 50% width. If you want the rows to wrap at a certain viewport why are you dividing the two elements into 12 evenly? At your desired break point give both a width of 100%, or whatever the appropriate bootstrap values are e.g.
<div id="search" class="col-12">
...
</div>
<div id="searchResultsColumn" class="col-12">
...
</div>
I have theme, and in header.tpl
<div class="nav">
<div class="container">
<div class="row">
<nav>{hook h="displayNav"}</nav>
</div>
</div>
</div>
But this is normal <ul>, <li> menu... How to make it responsive - f.e. select menu?
In Prestashop the horizontal top menu is generated by this module "blocktopmenu" in the modules folder you can find blocktopmenu.php and you can edit how the module generate the menu html
Let’s say that I have a carousel on my index page.
Inside the template for index, it loads a particular channel, “Foo”
<div "slider">
<ul class="slides">
{exp:low_reorder:entries set="foo" dynamic="no"}
<li class="foo_{entry_id}">
<div class="container">
<div class="row-fluid">
<div class="span12">
{foo_html}
<style type="text/css">{foo_css}</style>
</div>
</div>
</div>
</li>
{/exp:low_reorder:entries}
</ul>
</div>
That channel, naturally, has a list of content items
I want the list of content items displayed to exclude one of the items in the channel if the referrer is not bing.
Can anyone show me the way that they would go about accomplishing that? I'm not getting any traction on the ellislab forum.
I whipped up a plugin for you, which you can find here
You can wrap the item in a conditional using that plugin to check if it should be output.
I'm new to JS and I'm trying to find a solution to creating a responsive custom grid layout on the Zurb Foundation 4 framework.
Custom Layout
There will be a set size for bigger blocks and the smaller ones will fill in around it but in this type of pattern as more divs are added.
But in a mobile layout, they will all become the same size and stack.
I've been messing around with mason.js and jQuery masonry but I haven't had any luck. Would either of these work for my problem or is there something else I should look into?
You can do a layout like that with just nested rows and using other grid classes like "small-", "large-", push, pull etc
I know you mentioned a JavaScript solution, but I thought I would offer up a crude Html/CSS option.
<div class="row">
<div class="large-2 columns">
<div class="row">
<div class="large-12 columns"></div>
</div>
<div class="row">
<div class="large-12 columns"></div>
</div>
</div>
<div class="large-5 columns"></div>
<div class="large-5 columns"></div>
</div>
<div class="row">
<div class="large-4 columns"></div>
<div class="large-8 columns">
<div class="row">
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
</div>
<div class="row">
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
</div>
</div>
</div>
Here is an extremely rough jsFiddle example
Obviously some playing around with the column count and possibly customize margins would be in-order. I did remove the media queries since the result window was playing tricks on me.
Hope this helps either way.
I wrote a plugin that does just this. check out www.masonjs.com that should do exactly what you're looking for! Cheers!
What is the best way to implement this layout with jQuery Mobile (menu-grid, 6 buttons in this example)?
I've tried the jQuery Mobile grid but I had many problems such as making it full width and full height, and changing the color to whatever I want.
You can create that in your own styling for that page. Float the icons and give them a 50% width (or less if you are using borders with box-model)
Since you dont have much going on which necessary requires body here, I feel going the way of header navigation might be the easiest. Just put the following code right after the header for your page. For eg:
<div data-role='header' data-position='inline' role='banner' data-theme='f' >
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">App Name</h1>
<div data-role="navbar" data-theme='c'>
<ul>
<li><a href="" >
Camera
</a></li>
<li><a href="" >
Wave
</a></li>
<li><a href="" >
Lock
</a></li>
<li><a href="" >
Pencil
</a></li>
<li><a href="" >
Star
</a></li>
<li><a href="" >
Friends
</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- header -->
Since you have six items here, jquery mobile will automagically align them in a 2x3 grid formation as displayed in your mockup (atleast will take care of the width). Other than this, your best bet for height might be doing some arithmetic in css. Eg: if header bar is 12px, then set each block's height:33%-4px;
For the color settings and such, jquery mobile theme roller works out way better than doing hand made css.
Use data grid "a"
Use the below one
<div data-role="navbar" data-grid="a">