我正在尝试使用引导程序编写一个小型应用程序,但似乎根本没有加载样式,即使我正确地包含了所有引导程序引用,这也是一些代码(我正在使用PUG,但我可以提供最终HTML(如果需要))
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')
布局代码是这里
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')
我确实检查了所有文件,并且确实加载了bootstrap css和js,只是没有应用任何样式,如此处所示
模板的设置方式,加载自定义样式的link
元素放置在body
中,而不是它所属的head
中。尝试使用prepend and append指令的类似方法:
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')