Very beginner code here. But my bootstrap isn't linking to my html. I am trying to create a nav bar where the four list elements are pulled so that they are on the same row.
<! DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>ONE</li>
<li>TWO</li>
</ul>
<ul class="pull-right">
<li>LOG IN</li>
<li>HELP</li>
</ul>
</div> <!--End nav container-->
</div> <!--End nav-->
</body>
</html>
As of right now the list is displaying at the default way HTML displays lists. the second link to a main.css is just a blank file I am not doing anything in it. These files are structured as such:
Documents/Web
There are both in my web folder.
Leaving out the protocol tells the browser to fetch the link over the same protocol the webpage is currently being viewed in (http://www.paulirish.com/2010/the-protocol-relative-url/).
You're viewing your HTML locally (over file://), so your browser is interpreting:
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
As:
href="file://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
Which I'm pretty sure doesn't exist on your computer.
Just add the http: protocol for local development, or download bootstrap.min.css to your Documents/Web and change the href to a relative path.
Related
I created a simple F6 app for sites and tried to copy-paste code snippets to display menu with icons. Why id doe not work neither in the topbar menu not in the off-canvas menu section? Here is the HTML code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FDashboard</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="responsive-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li><span>Three</span> <i class="fi-list"></i></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
<div class="off-canvas-wrapper">
<button type="button" class="button" data-toggle="offCanvas">Open Menu</button>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Your menu or Off-canvas content goes here -->
<!-- Menu -->
<ul class="vertical menu icons icon-left">
<li><i class="fi-list"></i> <span>One</span></li>
<li><i class="fi-list"></i> <span>Two</span></li>
<li><i class="fi-list"></i> <span>Three</span></li>
<li><i class="fi-list"></i> <span>Four</span></li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<h1>Welcome to Foundation</h1>
</div>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/dist/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/js/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Adding the below lines to app.scss hasn't solved the problem:
#include menu-base;
#include menu-expand;
#include menu-align;
#include menu-direction($dir);
#include menu-icon-position;
#include menu-icons;
#include menu-icon-position;
What is wrong here ? Thank you!
I'm not sure it to be the best and the right solution. Anyway, it works fine. So if there is a better way, it is always welcome. The described steps were made for a F6 project created with Foundation CLI.
Download Foundation Icon Fonts 3
Unzip the downloaded archive and copy its entire content into [your-project]/css folder.
Delete preview.html file (useless as is used just to display available icons).
Reference the icons CSS file in your HTML page as follows <link rel="stylesheet" href="css/foundation-icons/foundation-icons.css" />. You can put just underneath the generated during project creation <link rel="stylesheet" href="css/app.css"> line.
Use one of the icons font, for example:
<li><span>Three</span> <i class="fi-list"></i></li>
Enjoy :)
I've been putting this site together, and the series of six images (graphic1.jpg, graphic2.jpg etc) I would like to put into a sort of frame, like the attached image, so that the text always stays under the image, even on mobile if the images were squeezed down single file, and also to give some visual clarity to which bit of text goes to what image.
I'm also having trouble with the two buttons at the bottom of the page centering, despite the fact that I'm using the center code.
Also, is there a resource I can be pointed to to set the width of the nav-bar to a maximum, so that the site can have edges and a background behind/outside of that? I think there's something up with my code there.
Thanks for any help you can provide!
Brookes
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tribal Droid Studio</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="twelve columns centered">
<nav class="top-bar">
<ul class="title-area">
<li class="name"><h1>Tribal Droid Studio</h1></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>Visual Development</li>
<li>Sign Work</li>
<li>Our Process</li>
<li>Contact Us</li>
<li>About Tribal Droid</li>
</ul>
</section>
</nav>
<div class="row">
<div class="row">
<div class="large-5 columns">
<h2>Tribal Droid Studio</h2>
<p> asdf asd fasdfasdf asfghwgreqtrgafdbsfgqeth asdf gqfad </p>
</div>
<div class="large-7 columns">
</div>
<div class="large-12 columns">
<img src="img/tribalhead3.jpg"/>
</div>
<hr />
<div class="row">
<h2>Why Tribal Droid Studio?</h2>
<div class="large-12 columns">
<ul class="large-block-grid-3">
<li><img src="img/graphic1.jpg" />Graphic Design, Logo Design, and Branding all go into creating a visual identity.</li>
</panel>
<li><img src="img/graphic2.jpg" />But it can be hard to get noticed in a sea of things demanding attention.</li>
<li><img src="img/graphic3.jpg" />You may find developing one of your own to be lacking in professionalism or soul.</li>
<li><img src="img/graphic4.jpg" />At the heart of your visual identity is a story.</li>
<li><img src="img/graphic5.jpg" />Tribal Droid Studio is a team of artists and storytellers determined to turn your visions into visuals.</li>
<li><img src="img/graphic6.jpg" />Once your identity is ready, we have the signmaking tools and experience to bring it to life.</li>
</div>
<div class="row">
<divclass="small-8 small-centered columns">
<a class="button round"="contact.html">Contact us to get started!</a>
<a class="button round"="#">View our gallery of work</a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>
<script>
$(document).foundation();
</script>
</body>
</html>
![what I'd like the images and text to do together (font unimportant)][1]
First I'd go through and check your syntax... <divclass="small-8... is invalid. This can cause a break in the layout. Also... check your divs with "row" classes as it seems there are a lot of extras in this example...
I count 9 open <div> tags and only 6 close /div> tags...
For your image issues, set up some sort of css for the images to position them as you need, and then place that image, and the text for it, within a block element on the page. Right now your text is free to flow within the <li> tag and the image is free to float as well. Without some sort of container around them you are going to get separation.
I've got an application in jQuery Mobile. Every time a page is shown, some JavaScript must be executed to hide/show some elements (depending on the session state).
I've spent lots of time on this and cannot figure out why the JavaScript is not hiding the elements as expected, it sometime does it, sometime not. It seems a bit random. The DOM in fact seems consistent. The element that should be hidden have display: none and those visible have display: block, however it doesn't match what can be seen in the browser.
I managed to reduce the issue down to a very simple case. It's pretty much the basic boilerplate template with my added JavaScript:
page1.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page Title</h1>
<div id="el1">ELEMENT 1</div>
<div id="el2">ELEMENT 2</div>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
PAGE 2
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Title</h1>
<div id="el1">ELEMENT 1</div>
<div id="el2">ELEMENT 2</div>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
PAGE 1
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
test.js
$(document).bind("pagechange", function(event, data) {
console.info('Changed to page: ' + data.toPage.attr('id'));
$('#el1').hide();
$('#el2').show();
});
You can easily test it by putting these three files on a local server. page1.html and page2.html are pretty much the same pages (just for testing), and test.js just hide #el1 and show #el2. This JavaScript is always executed successfully when the page is changed (the console statement always shows up), however #el1 is sometime hidden, sometime not, when it should always be hidden.
And again, what puzzles me the most, is that everything seems correct if I look at the DOM directly (in Chrome console). The CSS is clearly display: none, yet the element is still visible.
Any idea what could be causing this issue?
A couple of things you might try.
Use on instead of bind. Perhaps you are binding to the the document and the document is changing, loosing the bind. Using on should be able to get rid of this.
Use on directly on the page:
$('#page1').on('pagechange', function() {});
In JQuery mobile listview, how can I replace the left-side thumbnail image with a data element?
Say I have a list of daily exercise tips. Instead of an image to the left, I want to show the "Day" of the tip. Like this:
4 Lift some weights -->
3 Do some squats -->
2 Do some pushups -->
1 Stretch your muscles -->
Assume in the "tips" model, there's a field for "Day", just like there's a field for content. Day is a number.
So, instead of this current code (which works to put a img to the left)
<div data-role="content" data-theme="d" >
<div class="content-primary">
<ul data-role="listview" >
<% #all_challenges.each do |tip| %>
<li><a href="#">
<img src="/images/icondock/accept2.png" class="ui-li-icon">
<h3><%= tip.outboundtitle %></h3>
</a>
<ul><!-- Second page with full tip -->
<li>
<br />
<p><%= tip.outgoing %></p>
</li>
</ul>
</li>
<% end %>
</ul>
I want to replace that line with a data element: <%= tip.day %>
What I can't figure out is how to let JQuery Mobile let me keep that great 32X32 space to the left, but not expect an image there. I want to put a big number (day) in there.
If I replace the img src line with <%= tip.day %> it just puts the number on TOP of the tip, and both are left justified. Two lines.
Any ideas?
Just created a sample with hardcoded values.Hope this is what you are looking for.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<style>
.day{
margin-top: -15px;
font-size:1.5em;
color:red;
}
#list .ui-link-inherit{
padding-left:30px;
}
</style>
</head>
<body>
<div id="page" data-role="page">
<div data-role="header">
<h1>Test Page</h1>
</div>
<div data-role="content">
<ul id="list" data-role="listview" data-inset="true">
<li><div class="day ui-li-icon ui-li-thumb">4</div>Lift some weights</li>
<li><div class="day ui-li-icon ui-li-thumb">3</div>Do some squats</li>
<li><div class="day ui-li-icon ui-li-thumb">2</div>Do some pushups</li>
<li><div class="day ui-li-icon ui-li-thumb">1</div>Stretch your muscles</li>
</ul>
</div>
</body>
</html>
A demo here - http://jsfiddle.net/5PPs4/
Let me know if that helps
I am trying to write my first ASP.NET website and I really want to use the Twitter Bootstrap but I'm failing at the first hurdle.
I downloaded the Zip file from here, unzipped it and added the files to my solution and the following lines to my _LAyout.cshtml file:
<link href="#Url.Content("~/Context/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap-min.js")" type="text/javascript"></script>
Here is a screenshot showing the above files in my solution:
I am trying to create a menu bar across the top with this code which was taken from this turorial
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Context/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bootstrap-min.js")" type="text/javascript"></script>
</head>
<body>
<div class="topbar">
<div class="fill">
<div class="container">
<h3>Present Ideas</h3>
<ul>
<li>Blog</li>
<li>About</li>
<li>Help</li>
</ul>
<ul class="nav secondary-nav">
<li class="menu">
Account Settings
<ul class="menu-dropdown">
<li>Login</li>
<li>Register</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="container-fluid">
#RenderBody()
</div>
<footer>
</footer>
</div>
</body>
</html>
What I get, instead of the horizontal bar is this:
I would appreciate any help to get me started with what promises to be, an excellent framework.
You're using Twitter Bootstrap 2.0, but the tutorial was written for Twitter Bootstrap 1.0, there has been quite a few changes to the markup you need to use to get the desired look.
It explains some of the changes to the navbar component in the changelog, there are also some basic examples of how it is done now:
http://getbootstrap.com/2.3.2/getting-started.html#examples
http://getbootstrap.com/2.3.2/components.html#navbar
Also (unrelated to the question), you're including both the minified version and the standard version of the css/js, you only need to include one of each.