Discuz3.2自己设计的模板中加入bootstrap
一、上章已按要求新建好了一个自有的模板并进行了安装。
二、将default文件夹下的common中的，header.htm,header_common.htm复制到我新建的模板文件夹 WWW\template\52jita\common中。
对header_common.htm的文件进行修改。
１、要下载好bootstrap 3，将解压后的js,fonts,css三个文件夹，复制到WWW\template\52jita\下。
同时下载好jquery-1.11.3.min.js到WWW\template\52jita\js\
２.修改header_common.htm的文件,对bootsrtap进行引用
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="{CHARSET}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--{if $_G['config']['output']['iecompatible']}--><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE{$_G['config']['output']['iecompatible']}" /><!--{/if}-->
<title><!--{if !empty($navtitle)}-->$navtitle - <!--{/if}--><!--{if empty($nobbname)}--> $_G['setting']['bbname'] - <!--{/if}--> Powered by Discuz!</title>
$_G['setting']['seohead']
<meta name="keywords" content="{if !empty($metakeywords)}{echo dhtmlspecialchars($metakeywords)}{/if}" />
<meta name="description" content="{if !empty($metadescription)}{echo dhtmlspecialchars($metadescription)} {/if}{if empty($nobbname)},$_G['setting']['bbname']{/if}" />
<meta name="generator" content="Discuz! $_G['setting']['version']" />
<meta name="author" content="Discuz! Team and Comsenz UI Team" />
<meta name="copyright" content="2001-2013 Comsenz Inc." />
<meta name="MSSmartTagsPreventParsing" content="True" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<base href="{$_G['siteurl']}" />
<link rel="stylesheet" type="text/css" href="./template/52jita/css/bootstrap.min.css">
<script src="./template/52jita/js/jquery-1.11.3.min.js"></script>
<script src="./template/52jita/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="./template/52jita/css/52jita.css">
上面中，一定要注意两个js文件的顺序，我试了一下，反了就不成功。
<script src="./template/52jita/js/jquery-1.11.3.min.js"></script>
<script src="./template/52jita/js/bootstrap.min.js"></script>
其中的，52jita.css是我准备用来新建ＣＳＳ的，放在这作好两手准备。
三、进行测试。
在header.htm,编辑，在最后加上：
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
然后，保存后有，在后台更新缓存，再刷新论坛首页。
便会发现，头部文件下方，多了一个按钮，launch demo modai,点击它会弹出一个对话框。
如此，证实此bootstrap成功引用。
四、加载扩展ＣＳＳ，因为这个功能很实用，在WWW\template\52jita\common中。新建两个ＣＳＳ即可。
extend_module.css extend_common.css
浙公网安备 33010602011771号