I am learning on how to make a canvas menu with Foundation & I made this example but it does not work at all!
Here's the code:
<!DOCTYPE html>
<!--[if IE 9]>
<html class="lt-ie10" lang="en">
<![endif]-->
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>thenewboston</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="main.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<!-- Toggle button -->
<a class="left-off-canvas-toggle" href="#">Toggle Menu</a>
<!-- Offcanvas menu -->
<aside class="left-off-canvas-menu">
<ul class="no-bullet">
<li>Home</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</aside>
<!-- Main content -->
<div class="row">
<div class="medium-6 columns bg-2">Hey now dude</div>
<div class="medium-6 columns bg-3">This is some sample content</div>
</div>
<!-- Exit overlay -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Everything looks perfect and my css & js folders are correctly placed at the same directory. I also test if foundation works or not with another simple example and it worked fine. I really don't know why it's not working. Please if you know how to solve it ,please let me know.. Thanks!
Related
I use bellow code to add a right button, which is "订阅按钮":
<!doctypoe html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
www.<strong>google</strong>.com
<ul class="nav navbar-nav">
<li class="active">课程</li>
<li>博客</li>
<li>手册</li>
</ul>
订阅课程
</div>
</nav>
<div class="container" style="height:5000px;">
<div>
<h1>title123</h1>
<p>按时打算是多少对阿斯达方的方式斯蒂芬斯蒂芬按时打算</p>
</div>
</div>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
But however the button is not vertical align center, you can see my snapshot bellow:
Tested your code and it's not vertically centered in bootstrap versions 3.0.0-3.0.2 but centered in 3.0.3-3.3.7
I suspect you are using an old version of bootstrap. Upgrade?
I'm using Laravel to create a web application. So I created a header.css file and it is in public/assets/css/header.css. What I am trying to do is just style the header, but it isn't working.
In my default.blade.php I have
<!doctype html>
<html>
<head>
#include('includes.head')
</head>
<body>
#include('includes.header')
<div id="main" class="row">
#yield('content')
</div>
<footer class="row">
#include('includes.footer')
</footer>
</div>
</body>
</html>
My head.blade.php includes the link for the external stylesheet and it is
<meta charset="utf-8">
<meta name="description" content="blah blah.">
<meta name="author" content="Hunter Marshall">
<title>Elite Training Pro</title>
<!-- load bootstrap from a cdn -->
<!--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css">-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link media="all" type="text/css" rel="stylesheets" href="{{ URL::asset('assets/css/header.css') }}"></link>
My header.blade.php is
<div class="navbar nav-background">
<div class="navbar-inner">
<a id="logo" href="/">Elite Training Pro</a>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</div>
My header.css is
.nav-background {
background-color:green;
}
Now I've tried HTML::style(), just assets(), HTML::to() but nothing seems to work. I can see the link to the stylesheet in my head when I look at the source code, but there is no background color. I also don't see the file in the inspect source.
Just use / before the folder path directive
<link rel="stylesheet" href="/assets/css/styles.css">
In your code try like this
<link media="all" type="text/css" rel="stylesheets" href="{{ URL::asset('/assets/css/header.css') }}"></link>
This works
href="{{ asset('assets/css/header.css') }}
I have the newest Foundation complete version and I am following this tutorial. https://www.youtube.com/watch?v=RK_k__4Y4TU
I am trying to get a menu but there is nothing on my website at all. It is just blank.
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<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>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<ul class="menu vertical">
<li>Links</li>
<li>Links</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content></div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I tried your code and only mistake is you have written off-canvas insted of off-canvas-wrap.
No class exist with name off-canvas.
<div class="off-canvas-wrap position-left" id="offCanvas" data-off-canvas>
I am having some issues getting Thymeleaf to behave the way I want regarding templates. I was previously using Apache Tiles which worked but I thought it was heavy weight with the configuration / XML. I had an elegant solution where I was even defining my JavaScripts and Sytlesheets in Tiles XML configuration. However I want to move away from JSPs entirely. I have seen references for both Thymeleaf and Facelets. I decided to give Thymeleaf a try but I'm having issues getting a default layout for all my other pages.
Just for some background this was my default layout file I was using with Apache Tiles.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<tiles:importAttribute name="javascripts"/>
<tiles:importAttribute name="stylesheets"/>
<!DOCTYPE html>
<html>
<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">
<meta name="author" content="XXXXXXXXXXX">
<meta name="description" content="Something">
<title><tiles:insertAttribute name="title"></tiles:insertAttribute></title>
<!-- stylesheets -->
<c:forEach var="css" items="${stylesheets}">
<link rel="stylesheet" type="text/css" href="<c:url value="${css}"/>">
</c:forEach>
<!-- end stylesheets -->
</head>
<body>
<!--[if lt IE 10]>
<p class="alert alert-warning">
Warning: You are using an unsupported version of Internet Explorer. We recommend using Internet Explorer
10+. If you are a Windows XP user you'll need to download an alternative browsers such as FireFox, Chrome,
Opera, or Safari.
</p>
<![endif]-->
<!-- header -->
<div id="header">
<tiles:insertAttribute name="header"></tiles:insertAttribute>
</div>
<!-- end header -->
<!-- content -->
<div id="content">
<tiles:insertAttribute name="content"></tiles:insertAttribute>
</div>
<!-- end content -->
<!-- footer -->
<div id="footer">
<tiles:insertAttribute name="footer"></tiles:insertAttribute>
</div>
<!-- end footer -->
<!-- scripts -->
<c:forEach var="script" items="${javascripts}">
<script src="<c:url value="${script}"/>"></script>
</c:forEach>
<!-- end scripts -->
</body>
</html>
I want to replicate similar behavior with Thymeleaf where the view would be rendered inside the template, hopefully that makes since.
As far as I understand it right now Thymeleaf does not work that way. Instead you define fragments and include them on each page. It works the opposite direction.
I found this example of GitHub https://github.com/michaelisvy/mvc-layout-samples/tree/master/src/main/webapp/WEB-INF/view/thymeleaf
I don't understand the following file.
!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link th:href="#{/style/app.css}" rel="stylesheet" />
</head>
<body>
<div class="container" style="padding-top: 50px;">
<div th:fragment="menuFragment">
<div class="header well">
<img th:src="#{/images/springsource_banner_green.png}"/>
</div>
<div class="page-header">
<h1 th:text="${title}"></h1>
</div>
<ul>
<li><a th:href="#{/users/all/jsp-plain.htm}">No template</a></li>
<li><a th:href="#{/users/all/jsp-custom-1.htm}">Custom tags</a></li>
<li><a th:href="#{/users/all/jsp-custom-2.htm}">Custom tags with table tag</a></li>
<li><a th:href="#{/users/all/jsp-tiles.htm}">Apache Tiles</a></li>
<li><a th:href="#{/users/all/thymeleaf.htm}">Thymeleaf</a></li>
</ul>
</div>
</div>
</body>
</html>
This line is pointless as its not part of the fragment as when it gets included in the users.html the html structure is lost.
<div class="container" style="padding-top: 50px;">
Essentially I want something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<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" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container" style="padding-top: 50px;">
<div>
<div class="header well">
<img th:src="#{/images/springsource_banner_green.png}"/>
</div>
<div class="page-header">
<h1 th:text="${title}"></h1>
</div>
<ul>
<li><a th:href="#{/users/all/jsp-plain.htm}">No template</a></li>
<li><a th:href="#{/users/all/jsp-custom-1.htm}">Custom tags</a></li>
<li><a th:href="#{/users/all/jsp-custom-2.htm}">Custom tags with table tag</a></li>
<li><a th:href="#{/users/all/jsp-tiles.htm}">Apache Tiles</a></li>
<li><a th:href="#{/users/all/thymeleaf.htm}">Thymeleaf</a></li>
</ul>
</div>
</div>
<div id="content">
<!-- PAGES SHOULD RENDER HERE, example User.html -->
</div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Any ideas or best practices?
You want the Thymeleaf Layout Dialect.
I'm kind of new to Foundation and I'm trying to create a top bar, but my code does not create the top bar for me. Can you help??? I've reviewed the documentation for the top bar, but I'm still stuck.
Thank you in advance.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<!--<div class="row">
<div class="meduim-6 columns"><img src="http://placehold.it/300x100"></div>
</div>-->
<div class="contain-to-grid sticky">
<nav class="top-bar" >
</nav>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation({
topbar : {
custom_back_text: false,
is_hover: false,
mobile_show_parent_link: true
}
});
</script>
</body>
</html>
Thank you in advance.
Your app.css and app.js are missing
<head>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<!-- Custom Modernizr -->
<script src="javascripts/foundation/modernizr.foundation.js"></script>
</head>
<body>
<!-- jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- JS Files-->
<script src="javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
</body>