I downloaded this basic header theme, and added to my index.php on localhost, using uwamp. Click here for link
<!DOCTYPE html>
<html lang="hu">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Generate classes to fix InternetExplorer bugs -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!--[if lt IE 7 ]> <html class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9"> <![endif]-->
<head>
<!-- ~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Set the website title -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<title></title>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Google Webmasters code for the website -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<meta name="google-site-verification" content="">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Meta tags for the website seo -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Language" content="hu-hu">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<meta name="revisit-after" content="">
<meta name="distribution" content="local">
<meta name="language" content="hu">
<meta name="rating" content="general">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Add OpenGraph meta tags for sharing the website -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<meta property="og:title" content="">
<meta property="og:type" content="website">
<meta property="og:image" content="">
<meta property="og:site_name" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:locale" content="hu_HU">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Add the websites base href link -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!--<base href="">-->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Canonical link -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<link href="" rel="canonical">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Add the favicon to the website -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<link href="/images/assets/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="/images/assets/favicon.ico" rel="icon" type="image/x-icon">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Include css style files -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<nav class="navbar navbar-default navigation-clean-button">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Company Name</a>
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav">
<li class="active" role="presentation">First Item</li>
<li role="presentation">Second Item</li>
</ul>
<p class="navbar-text navbar-right actions"><a class="navbar-link login" href="#">Log In</a> <a class="btn btn-default action-button" role="button" href="#">Sign Up</a></p>
</div>
</div>
</nav>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Include jQuery library, Bootstrap responsive framework, and other javascript files -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>
If i view the site source in the browser, i can find and open all the css and js files, so the way to the files is correct.
My problem is, that i dont get anything on the page, no css style, i cant see the nac items...Only just the logo text.
Whats going wrong? The bootstrap css and js are downloaded from the offical bootstrap site. I commented the base href also, beacuse the site isnt on a server.
Related
I am trying to use js in angular 4 and I copy/past all the required js files in assets folder but min.js files goes under js files, I don't know why? so my scripts failed to load and progress bar not working, there is no error on browser console, can anyone tell what to do?
Here is index.html code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RevDashboard</title>
<base href="/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reviews AI! | </title>
<!-- Bootstrap -->
<link href="assets/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="assets/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="assets/vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="assets/vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="assets/build/css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<app-root></app-root>
<!-- jQuery -->
<script src="assets/vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="assets/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="assets/vendors/nprogress/nprogress.js"></script>
<!-- bootstrap-progressbar -->
<script src="assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<!-- Custom Theme Scripts -->
<script src="assets/build/js/custom.min.js"></script>
</body>
</html>
Here is the code where I use progress bar
<td class="project_progress">
<div class="progress progress_sm">
<div class="progress-bar bg-green" role="progressbar" data-transitiongoal="57"></div>
</div>
<small>57% Complete</small>
There is the images of file:
Here is the page Image
My friends have asked me to make a website for their production company, which I've been working on, but as I am not a professional web designer, I've run into some issues. I've worked on this site by customizing a template I found online. However, I've come across an issue that I can't seem to fix despite searching here and on several other sites. The links in the navbar do not function when clicked. I was hoping someone could take a look and see if they've got any suggestions. The site can be found here.
This is my index HTML file-
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="robots" content="all,follow">
<meta name="googlebot" content="index,follow,snippet,archive">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Great Red Spot Productions | New Orleans, LA</title>
<meta name="keywords" content="">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,100%7CRoboto:400,700,300,100' rel='stylesheet' type='text/css'>
<!-- Bootstrap and Font Awesome css -->
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Theme stylesheet -->
<link href="css/style.default.css" rel="stylesheet" id="theme-stylesheet">
<!-- Custom stylesheet - for your changes -->
<link href="css/custom.css" rel="stylesheet">
<!-- owl carousel css -->
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<!-- CSS Animations -->
<link href="css/animate.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.png">
<!-- Mordernizr -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- Responsivity for older IE -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#navigation" data-offset="120">
<!-- *** NAVBAR ***
_________________________________________________________ -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- /#navbar -->
<!-- *** NAVBAR END *** -->
<div id="all">
<!-- *** INTRO IMAGE ***
_________________________________________________________ -->
<div id="intro" class="clearfix">
<div class="item">
<div class="container">
<div class="row">
<div class="carousel-caption">
<span class="pull-left"><h1 data-animate="fadeInDown">Great Red Spot Productions</h1><span>
</div>
</div>
</div>
</div>
</div>
<!-- *** INTRO IMAGE END *** -->
<!-- /#all -->
<!-- #### JAVASCRIPT FILES ### -->
<!-- js base -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- for demo purpose -->
<script src="js/jquery.cookie.js"></script>
<!-- waypoints for scroll spy -->
<script src="js/waypoints.min.js"></script>
<!-- maps -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="js/gmaps.js"></script>
<!-- masonry layout -->
<script src="js/masonry.pkgd.min.js"></script>
<!-- owl carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- jQuery scroll to -->
<script src="js/jquery.scrollTo.min.js"></script>
<!-- jQuery counter -->
<script src="js/jquery.counterup.min.js"></script>
<!-- jQuery parallax -->
<script src="js/jquery.parallax-1.1.3.js"></script>
<!-- main js file -->
<script src="js/front.js"></script>
</body>
</html>
I'm not sure what other files would be necessary for help, please just let me know if you need any other info.
There are errors in your javascript.Open the developer tools you can view that.That errors may be preventing that links from functioning.
The problem is your jquery.Please use of the latest jquery version 3.1.1,it may help you,And define them in the correct place of your code.Download the bootstrap and set it in your html page.
It looks like the tutorial/example you used had the links scroll to the section it referred to. We can see this is the case as when we click on a link the error comes from jquery.scrollTo.min.js.
There must be a function that is called every time you click the menu items. This would either be inline in your index file, or in one of the many js files you included.
One debug method would be to comment out js files included until the links correctly, this should work as when javascript on the page is turned off the links work just fine.
Good luck!
I want to include a css all css and js in single page and load it in all page.Now If I want to include bootstrap.css and bootstrap.js in welcome page I have included in welcome.blade.php page and if i want to add in another page I have included in second.blade.php page also.I want to include it in master page
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
Crate header.blade.php
<!DOCTYPE html>
<html 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">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<meta name="description" content="">
<meta name="author" content="">
<title>dhinchakwale</title>
<!-- Bootstrap Core CSS -->
<link href="{{ asset('/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('/css/datepicker.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('/css/bootstrap-timepicker.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('/css/dataTables.bootstrap.css') }}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ asset('/css/admin.css') }}" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery -->
<script src="{{ asset('/js/jquery.min.js') }}"></script>
</head>
<body id="page-top">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img alt="Brand" src="{{asset('/images/logo.png')}}" class="img-brand"></a>
</div>
</div>
</nav>
<div class="content-div">
#yield('content')
</div>
<div class="clearfix"></div>
<!-- Bootstrap Core JavaScript -->
<script src="{{ asset('/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('/js/bootstrap-datepicker.js') }}"></script>
<script src="{{ asset('/js/bootstrap-timepicker.min.js') }}"></script>
</body>
</html>
And use like this
First extends header
Second Section of your content
#extends('layouts.header')
#section('content')
<section class="content-header">
<h1>
Hello
</h1>
</section>
#stop
Here is the steps you can follow
Create a master template layout
Extend the master template in all pages and paste your link into header section
To create a master template
//master.blade.php
<html lang="en">
#yield('header')
<body>
#yield('page-body')
</body>
</html>
Now Extend this layout in second.blade.php
#extend('master.blade')
#section('header')
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
#endsection
#section('page-body')
{{!-- content of body --}}
#endsection
Define a common layout and include all .js and .css file on that layout and than bind your page with this layout.
Layout:
<html>
<head>
<title>App Name - #yield('title')</title>
</head>
<body>
#section('sidebar')
This is the master sidebar.
#show
<div class="container">
#yield('content')
</div>
</body>
</html>
Where: #yield directive is used to display the contents of a given section.
View:
#extends('layouts.default')
#section('content')
i am the home page
#endsection
You can define a master layout view file then define your CSS and JS there. Then all of your view file will extend that layout file. See documentation here: https://laravel.com/docs/5.3/blade
As the title says the responsive feature of Bootstrap 3.0 is not working on any mobile device (Android, iPad) in my website. It works perfectly in chrome and firefox by making the window smaller.
I know a common problem is forgetting to include the
<meta name="viewport" content="width=device-width, initial-scale=1">
but I already have it inside my header tag like this:
Full HTML
<!DOCTYPE html>
<html 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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
Custom CSS Code
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
Am I missing something else? I have found a lot of posts related to this problem but all seem to be solved by adding the meta tag.
I even tried with two default templates from getbootstrap.com adding the meta tag manually and other meta tags found on other websites but it wont work. Any idea why?
Also I already added the root for the javascript functions at the bottom of the code (not sure if this helps but it enabled the slide menu coming from the 3 line button of the responsive feature).
Website
Your site pulls in http://sales-person-fish-27838.bitballoon.com/ via an iframe. Go directly there and it works fine. What host or how are you loading your content.
Under BuildCOnfig.groovy i added the following
plugins {
...
runtime ":twitter-bootstrap:3.0.3"
...
}
Thereafter, i edited my index.html code to like like follows (I found this code example from bootstrap itself).
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title>Cover Template for Bootstrap</title>
<r:layoutResources/>
<!-- Bootstrap core CSS -->
<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<r:layoutResources/>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building
simple and beautiful home pages. Download, edit the text, and add
your own fullscreen background photo to make it your own.</p>
<p class="lead">
Learn more
</p>
</div>
<div class="mastfoot">
<div class="inner">
<p>
Cover template for Bootstrap,
by #mdo.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
First, you should upgrade your version of the plugin to 3.1.1:
plugins {
...
compile ":twitter-bootstrap:3.1.1"
...
}
Second, since you are using the bootstrap plugin for Grails you need to use the resource modules to include it. Also you don't need to manually include jQuery as it will be included by the plugin. Here is a simple example of a starter template which is setup correctly for the bootstrap plugin and Grails.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>My example bootstrap page</title>
<r:require modules="bootstrap"/>
<r:layoutResources/>
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico'}">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<p>My fantastic site goes here.</p>
</div>
<r:layoutResources/>
</body>
</html>
I highly recommend you read up about the resource tag to get an understanding of how to include assets like CSS. It's also worth noting that the documentation for the plugin explains all of the above.