I want my site to be fluid/responsive to whatever device the user has; I reckon more often than not it will be a cell "phone," but I am developing on a laptop, so there's a mismatch between what I see at design time and what most users will see. Of course, I can run emulators/simulators, etc. But my point is that I want the site to automatically adjust to the size/aspect ratio/orientation the device at any given moment. From what I've read, the easiest way to accomplish this is to leverage Twitter Bootstraps capabilities by referencing their CSS file and adding a few class declarations to various tags in my html. I'm wondering just where I need to add these.
I've added the bootstrap css:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
My _SiteLayout.cshtml (Razor 2 webiste) file came structured this way (showing just the body, head decapitated):
<body>
<div id="fb-root"></div>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
</p>
</div>
<div class="float-right">
</div>
</div>
</header>
<div id="body" >
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>
</p>
</div>
</div>
</footer>
</body>
So it uses "content-wrapper" on the outher divs and then floats inner tags left and right. Does this obviate the need for Twitter Bootstrap? Is the same sort of responsive design baked into this Razor 2 structure already?
If not, in which tags should I put the Twitter Bootstrap class declarations?
Should I add class="row-fluid" to some of these tags and, if so, which ones?
The basic fluid grid scaffolding of Twitter Bootstrap is laid out as .container-fluid > .row-fluid > .span#. Spans within .row-fluid use percentage widths conducive of layouts consisting of elements that add up to 12: .span1, .span2, .span3 etc..
Span classes are already set to float:left which can be overridden by adding .pull-right to float:right elements.
So Bootstrap implementation with your layout could look something like:
<body>
<div id="fb-root"></div>
<header class="container-fluid">
<div class="row-fluid content-wrapper">
<div class="span6">
<p class="site-title">
</p>
</div>
<div class="span6 pull-right">
</div>
</div>
</header>
<div class="container-fluid" id="body">
#RenderSection("featured", required: false)
<section class="row-fluid content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer class="container-fluid">
<div class="row-fluid content-wrapper">
<div class="span12">
<p>
</p>
</div>
</div>
</footer>
</body>
Take a look at http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
Related
I'm trying to layout a page element using bootstrap 3 as it's base. I've been ok with most of the layout but I'm having trouble with a particular layout I'm trying to create.
Using the standard container > row > column approach the first row only contains an image, the second row a nav type panel which is meant to sit beneath the image. Instead it's appearing at the top.
Looking at it with chrome the first row appears to have no height, despite the image.
There's something I'm missing or don't understand here.
Update
The image in the main container is absolutely positioned with -50% top to handle an oversized image. The main container is set to relative.
Here's an image of what I'm trying to create (90% there)
I've created a jsfiddle here: http://jsfiddle.net/longestdrive/vt24K/
the html is below:
<div id="hole-stats-modal">
<div class="container" >
<div class="row">
<div class="col-sm-12">
<!-- image -->
<img src="http://downssiteassets.s3.amazonaws.com/content/articles/th_downs%20golf%20503.JPG" class="img-responsive course-image" />
</div>
</div>
<!-- hole stat panel -->
<div id="hole-stats-panel" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- side stats -->
<h3>Hole Detail</h3>
<p>Content for this panel</p>
</div>
</div>
</div>
</div>
<!-- hole text info -->
<div id="course-guide" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-1">
<h3 id="hole-n-2" >3</h3>
</div>
<div id="hole-description" class="col-sm-8 ">
<p>Some text here</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="hole-navigation">
<div class="container">
<div class="row">
<ul class="unstyled list-inline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The hole stat panel and hole info panel correctly appear where I expect them to but the nav panel does not
Any help appreciated
I think you had way more containers and rows than are needed. I recreated what you are looking for using a lot less elements.
you really only need two rows, one for the image and one for the bottom nav.
jsFiddle Demo
<div id="hole-stats-modal">
<div class="container">
<div class="row">
<div class="col-sm-12"> <!--optional-->
<div class="image"> <!-- Relative Pos with image as background -->
<div class="right-overlap transparent-back">...</div><!-- Absolute Pos to right-->
<div class="bottom-overlap transparent-back">...</div><!-- Absolute Pos ro bottom-->
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12"><!--optional-->
<div class="hole-navigation">
</ul></ul> <!--Nav-->
</div>
</div>
</div>
</div>
</div>
I have tried to build a MVC master template and sub pages based on bootstrap.
Somehow I have managed to break it and I cannot work out what has happened.
My test site is at http://taxiroutemvc.azurewebsites.net/
Notice how the various sections don't align vertically?
I'm guessing either too many or too few divs or some class problem but I just cant find it.
Bootstrap was not designed for you to add the well class on the same element as a spanX. You want to nest a <div> with the well class inside of your spanX.
Edit:
Also, when using the fluid scaffolding, all your rows need to be row-fluid.
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<form>
<div class="row-fluid"> <!-- not just 'row' -->
<div class="span12" id="bingMap">
etc.
</div>
</div>
</form>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="well">
<h3>We cover the following areas:</h3>
Cardiff | Barry
</div>
</div>
</div>
</div>
Currently working on a site template rebuild in HTML5 and with trying to keep in line with semantic best practices the markup is getting completely bloated with divs for what I would deem non page relevant content. Here's the markup I'm currently working with for a rather large page footer block containing various info panels:
<footer class="container">
<div class="footer-info-panel left">
<div class="contact-details">
<div class="heading">Contact Us</div>
<div class="content"></div>
</div>
<div class="follow-us">
<div class="heading">Follow Us</div>
<div class="content"></div>
</div>
<div class="bookmark">
<div class="heading">Bookmark & Recommend Us</div>
<div class="content"></div>
</div>
</div>
<div class="footer-info-panel right">
<div class="payment-methods">
<div class="heading">Payment Methods</div>
<div class="content"></div>
</div>
<div class="customer-services">
<div class="heading">Customer Services</div>
<div class="content"></div>
</div>
<div class="company-info">
<div class="heading">Company Information</div>
<div class="content"></div>
</div>
</div>
</footer>
So adhering to OOCSS techniques in SASS with minimal stylesheet nesting I can simply define global footer styles as .footer-info-panel .heading { styles here } etc, however should I be using one of the h1-h6 tags, it seems like div overkill yet my interpretation of the the html5 spec would say otherwise as it's not relevant page content?
Straight from the HTML5 spec:
Some site designs have what is sometimes referred to as "fat footers"
— footers that contain a lot of material, including images, links to
other articles, links to pages for sending feedback, special offers...
in some ways, a whole "front page" in the footer.
This fragment shows the bottom of a page on a site with a "fat
footer":
...
<footer>
<nav>
<section>
<h1>Articles</h1>
<p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
our somersaults class! Our teacher Jim takes you through the paces
in this two-part article. <a href="articles/somersaults/1">Part
1</a> · Part 2</p>
<p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
your way through the bars. <a href="articles/kindplus/1">Read
more...</a></p>
<p><img src="images/crisps.jpeg"> The chips are down, now all
that's left is a potato. What can you do with it? Read more...</p>
</section>
<ul>
<li> About us...
<li> Send feedback!
<li> Sitemap
</ul>
</nav>
<p><small>Copyright © 2015 The Snacker —
Terms of Service</small></p>
</footer>
</body>
As Jared you may use the aside or section elements.
I'm trying to make my footer run the whole width of the web page like the navigation, however I want to centre the content of the footer inline with the content above.
<footer>
<div class="container narrow">
<div class="row-fluid footer">
<div class="span4">
</div>
<div class="span3">
</div>
<div class="span5">
</div>
</div>
</div>
</footer>
I thought that adding the classes <div class="container narrow"> inside the footer would centre the content but this has not worked. Any ideas?
The site is available here - http://www.openreachmarketing.co.uk/
You have the footer background defined in the .footer class. So you need .footer to wrap around .container.narrow.
This works when I try:
<footer>
<div class="footer">
<div class="container narrow row-fluid">
<div class="span4">
</div>
<div class="span3">
</div>
<div class="span5">
</div>
</div>
</div>
</footer>
I am working with Bootstrap and am having a strange layout issue in my fixed (not responsive) layout.
Using the BS scaffolding syntax, I have several nested divs in my grid. Usually looks/works fine; however, sometimes when I reload the page divs break throughout the page (header nav, divs in main content, etc.)
I cannot recreate this problem, it just seems to act the way it wants when it wants (again, when I refresh/reload).
Here are screenshots of what the issue looks like when it happens, and what it should always look like:
good 1
http://static.inky.ws/image/3486/ss-1-good.jpg
bad 1
http://static.inky.ws/image/3485/ss-1-bad.jpg
(I cannot add more URLS to this post; if you want to see more, the above 2 can be changed to 3487/ss-2-good.jpg & 3484/ss-2-bad.jpg)
Steps taken (to no positive effect):
-redo the grid
-go through my custom CSS line by line, seeing if removing portions solves the problem
-confirm paths, file order in webpage, etc.
-search, search and search again
Here is the basic HTML structure:
<div class="container">
<?php require ("includes/nav-top.php") ;?>
<!--page header -->
<div class="row" id="">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
</div>
<div class="row">
... content ...
</div>
<div class="row-fluid">
<div class="span8">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
<div class="row-fluid">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
</div>
<!--row-fluid-->
</div>
<!--span8-->
<div class="span4">
... content ...
</div>
<!--span4-->
</div>
<!--row-->
<div id="" class="row">
<div class="span4">
... content ...
</div>
<div class="span4">
... content ...
</div>
<div class="span4">
... content ...
</div>
</div>
<!--row-->
<footer>
... content ...
</footer>
</div>
<!--container-->
I am loading the external files like this:
HEAD:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
;
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-config.css">
<link rel="stylesheet" href="css/font-awesome.css">
<script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
BEFORE the closing BODY tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<?php require('includes/i-modal.php');?>
<?php require('includes/i-googleAnalytics.php');?>
<?php require_once('includes/i-js.php'); ?>
NOTES:
-like I said, this could happen 10x in a row, then the next 5 refreshes/reloads and it looks fine
-in the above files loaded in there is an include for Fancybox (i-modal.php) as well as custom JS (i-js.php). There is no CSS or anything else in those files which seems like it might trigger this.
-currently the BS overwrites (bootstrap-config.css) is empty; seemingly, when I add anything to it the problem kicks in, whether or not what little I add has margin or padding.
-from my research it looks like my use of "row-fluid" for nested grid sections is allowable in the otherwise fixed layout
-so far, testing on Safari / OSX, have not seen the problem in other browsers, but as I said it happens when it chooses to.
SO. After all this, I guess I am wondering what these symptoms might suggest to the knowledgeable out there. Bootstrap is outstanding, in many ways the tool of my dreams - has anyone experienced anything like this?
Thanks for reading this.
First of all you have some bad structure in your layout it should look like this:
<div class="row" id="">
<div class="span6">
<div class="row">
<div class="span3">
... content ...
</div>
<div class="span3">
... content ...
</div>
</div>
</div>
<div class="span6">
... content ...
</div>
</div>
<div class="row">
<div class="span12">
... content ...
</div>
</div>
<div class="row-fluid">
<div class="span8">
<div class="row-fluid">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
</div>
</div>
</div>
You have to follow this rules:
don't use row-fluid in fixed layout.
full width span is 12.
content have to be in span - ALWAYS
sub-spans have to be in rows - ALWAYS
a sum of spans in sub-row have to be equal of container span (that don't concerns row-fluid) eg. in span8 you can place a row with span6 and span2
don't mess with bootstrap CSS if you are not SURE what you're doing
check if you didn't accidentally name some custom CSS classes same way as in BS
Fix those and it should fix your display problems.