I'm using Bootstrap in a pug template, but the layout is not responsive
// layout.pug
html
head
title= title
link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css' integrity='sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l' crossorigin='anonymous')
link(rel='stylesheet', href='/stylesheets/register.css')
body
block content
index
extends layout
block content
.d-flex.flex-column.bd-highlight
.p-2.bd-highlight.px-0.py-0
nav.navbar.navbar-light.bg-red.by-5
.container-fluid
img(src='../images/iconWhite.png' alt='logo' width='35' height='35')
script(src='https://code.jquery.com/jquery-3.5.1.slim.min.js' integrity='sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj' crossorigin='anonymous')
script(src='https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js' integrity='sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns' crossorigin='anonymous')
I only needed this in head
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1')
Related
I'm trying to write a small application using bootstrap but it seems it doesn't load the styles at all, even tho i included all bootstrap references properly, here is some code (i am using PUG, but i can provide the final HTML if needed)
extends layout
block content
link(rel='stylesheet', href='/stylesheets/index.css')
.container
.row
.col-md-8
section
h1.entry-title
span Sign Up
hr
form#signup.form-horizontal(method='post' name='signup' enctype='multipart/form-data')
.form-group
label.control-label.col-sm-3
| Email ID
span.text-danger *
.col-md-8.col-sm-9
.input-group
span.input-group-addon
i.fas.fa-envelope-open-text
input#emailid.form-control(type='email' name='emailid' placeholder='Enter your Email ID' value='')
.form-group
.col-xs-offset-3.col-xs-10
input.btn.btn-primary(name='Submit' type='submit' value='Sign Up')
The code of layout is this
doctype html
html(lang='en')
head
title= title
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no')
link(href='bootstrap/css/bootstrap.css', rel='stylesheet', media="all")
body
block content
script(src='jquery/jquery-3.4.1.min.js')
script(src='bootstrap/js/bootstrap.bundle.js')
script(src='https://kit.fontawesome.com/ae629fb23c.js')
I did check all the files and it does load bootstrap css and js, it just doesn't apply any styles, as seen here
Screenshot
The way your templates are setup, the link element loading your custom styles is placed in the body instead of the head where it belongs. Try something like this, which makes use of the prepend and append directives:
layout.pug
doctype html
html(lang='en')
head
block head
title= title
meta(charset='utf-8')
meta(name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no')
link(href='bootstrap/css/bootstrap.css', rel='stylesheet', media="all")
body
block content
script(src='jquery/jquery-3.4.1.min.js')
script(src='bootstrap/js/bootstrap.bundle.js')
script(src='https://kit.fontawesome.com/ae629fb23c.js')
page.pug
extends layout
append head
link(rel='stylesheet', href='/stylesheets/index.css')
prepend content
.container
.row
.col-md-8
section
h1.entry-title
span Sign Up
hr
form#signup.form-horizontal(method='post' name='signup' enctype='multipart/form-data')
.form-group
label.control-label.col-sm-3
| Email ID
span.text-danger *
.col-md-8.col-sm-9
.input-group
span.input-group-addon
i.fas.fa-envelope-open-text
input#emailid.form-control(type='email' name='emailid' placeholder='Enter your Email ID' value='')
.form-group
.col-xs-offset-3.col-xs-10
input.btn.btn-primary(name='Submit' type='submit' value='Sign Up')
I am using express plugin in nodeJS
app.get('/',function(req,res) {
res.render('main', {
pageTitle: "заголовок",
header: "хедер"
});
});
I set jade for view engine
app.set('view engine','jade');
And this is my simple jade view
doctype html
html(lang="en")
head
title= pageTitle
body
h1= header
But i get unknown symbols in my browser.
http://pastenow.ru/Upload/Paste/FY0W.png
In your jade code , try to specify charset
doctype html
html(lang="en")
head
meta(charset="UTF-8")
title= pageTitle
body
h1= header
I'm broadly following this tutorial on Express, Mongo and Jade, and although I've successfully fetched back some data from mongo, but jade isn't rendering my page.
http://blog.ijasoneverett.com/2013/03/a-sample-app-with-node-js-express-and-mongodb-part-1/
Snippets are:
app.js:
app.get('/', function(req, res) {
employeeProvider.findAll(function(error, emps) {
// adding logging here shows that 'title' and 'emps' are correctly populated
res.render('index', { title:'Employees', employees:emps });
});
});
layout.jade:
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
index.jade:
extends layout
block content
h1= title
div
each employee in employees
div.employee
div.created_at= employee.created_at
div.title= employee.title
div.name= employee.name
When I extract the source from the page displayed in the browser, it just shows this:
<!DOCTYPE html><html><head><title>Employees</title><link rel="stylesheet" href="/stylesheets/style.css"></head><body></body></html>
In fact, nothing I put in jade.index to simplify it seems to get rendered. eg this also renders a blank page:
index.jade:
extends layout
block content
h1= title
Check again the tutorial and follow it (realy), since your code is diferent...
http://blog.ijasoneverett.com/2013/03/a-sample-app-with-node-js-express-and-mongodb-part-1/
The index.jade should be:
extends layout
block content
h1= title
#employees
- each employee in employees
div.employee
div.created_at= employee.created_at
div.title= employee.title
div.name= employee.name
a(href="/employee/new")!= "Add New Employee"
There are some needed css over #employees and
the each loop needs a - before itself.
i use Express 3x + Jade + bootstrap +..etc
my block/extend structure looks like this
.layout.jade (only head stuff)
.topNav.jade (only top nav)
.sideNav.jade (sideNav and control center interface)
.slidePrem.jade (the actual content)
now i try to res render slidePrem
-> this renders sidenav, topnav, layout (so the "extends" statement is read out of slideprem)
but it wont show any content of slidePrem
so after many many hours of recoding, searching, reintending, etc
. i rewrote structure to slideprem -> sidenav -> layout
-> this renders slideprem, sidenav, layout
->>> So is there actually a limit of nested blocks?
-> is it editable?
-> or cld u imagine the error somewhere else?
regards Pika
Edit:
//slidePrem.jade//
extends ../sideNav
block wall
#bla (or alert or sth)
//sideNav.jade//
extends topNav
block content
#subHeader
#subHeadNav
#Content //doesnt conflict with "block content"
div.container
div.row
div.span9
block wall
div.span3
// further code
//topNav.jade//
extends layout
block navigation
div.topnav.....
div...
...
block content
#modal
//layout.jade//
doctype 5
html
head
title= title
<meta name="viewport" content="width=device-width, initial-scale=1.0">
link(rel='stylesheet', href='http://fonts.googleapis.com/css?family=Titillium+Web&subset=latin,latin-ext', type='text/css')
link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css', media="screen")
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/stylesheets/cCenter.css')
script(src='/javascripts/jq.js')
script(src='/bootstrap/js/bootstrap.min.js')
script(src='/javascripts/core.js')
script(src='/javascripts/ajax.js')
body
block navigation
You should try to work with includes instead of extends.
So you can try for your layout.jade :
html
head
(...)
body
block navigation
And in your navigation.jade block
extends layout
block navigation
.topnav (div aren't required in jade)
(...)
include content
Your content.jade only needs then
#subHeader
#subHeadNav
#Content //doesnt conflict with "block content"
div.container
div.row
div.span9
include wall
div.span3
If that's not clear enough, you can find all the include documentation on the GitHub page of the project.
I hope it'll help.
My problem is with my jade layout file not rendering correctly. The body is rendered but the head tags in the produced html are empty. I have tried to render the layout.jade file separately and it works perfectly.
Here is my layout.jade file
!!!
html
head
title= title
link(rel='stylesheet', href='stylesheets/style.css')
script(type='text/javascript', src='javascripts/jquery-1.7.2.js')
link(rel='stylesheet', href='stylesheets/pictogram-button.css')
body
header(style='padding-bottom:50px;')
include partials/header
section(style='min-height:600px;')
div!= body
footer.footer
include partials/footer
And here is my index.jade file
.line_h100t
.column_wrap800
.round_box1_w800
.list_fl10
ul.line_h40
li(style='margin-left:20px;')
ul
li
img(src='/images/icon/whiteWithoutCircle/check.png')
img(src='/images/login/loginTxt.png')
ul.line_h40t
li(style='margin-left:50px;')
p 로그인이 필요하신 분은
p Oopa Roopa 관리팀으로 문의해 주세요!
li(style='border-left:1px solid #999; padding:0 0 0 20px;')
ul
li
span.text_yellow ID
ul
li
input.login_input(type='text')
ul.line_h35t
li
span.text_yellow PASSWORD
ul
li
input.login_input(type='password')
li
ul.line_h10t
a.button-bevel.transparency(href='#')
.line_h35
span.lock
p(style='width:100px;') LOGIN
And here is the function in my express app that renders the index file.
adminLogin : function (req,res) {
res.render( 'index', {
title: 'Admin Login',
pageCategory: 'Admin Login',
pageName : 'index'
});
},
Thank you in advance for any help you an give me.
In express 3, layouts were removed in favor of template inheritance as explained here. The jade readme describes how this works, and an additional example is here.
You will need to replace div!= body with block body (or similar). Then at the top of index.jade, you'll want to add extends layout. Finally put the contents of index.jade under a block body (or whatever name you used in layout.jade).