使用bootstrap4.4制作织梦文章详情页自适应模板实战

bootstrap4.4已经发布，新版本的普及是大势所趋，任何技术都需要实战才能学到其中的精髓，今天决定发布这一篇bootstrap与dedecms想结合的综合使用方法。我之前的教程里面有单独讲解bootstrap的安装，如果还不会的话请翻阅我的老文章。

网站后台设置

在网站后台添加一个顶级栏目，栏目属性设置为“最终栏目列表页”，高级选项里面的“文章模板”选择为default/article_article.htm文件，设置好之后保存。然后在新创建的栏目里面发布一篇文章，这篇文章在后面用于测试排版。

模板制作步骤

下载bootstrap4.4和相关的js文件，我们需要bootstrap.min.css，bootstrap.min.js，jquery-3.4.1.slim.min.js，popper.min.js，将bootstrap.min.css文件拷贝到templatesdefaultstyle文件夹里面，将其余的3个js文件拷贝到templatesdefaultjs文件夹里面。

1、引入bootstrap4.4的css和js文件

打开templatesdefaultarticle_article.htm文件，按照下面的方式输入代码。

bootstrap文件导入

上图所示，1-5局代码是bootstrap实现自适应的必须代码，第4句使用了dedecms标签来判断编码，第12句是引入bootstrap.min.css文件。打开templatesdefaultfooter.htm文件，将其中的代码全部删除，导入bootstrap4.4的3个js文件。

导入bootstrap文件

需要注意这3个js文件的顺序依次是jQuery，popper，bootstrap，顺序不能放错，他们之间有相互依赖的关系，必须先加载jQuery，否则后面两个js文件会不生效。设置好之后保存文件。

2、使用bootstrap代码和dedecms标签相结合完成页面制作

打开templatesdefaultarticle_article.htm文件，修改body标签里面的代码，将dedecms的标签嵌套在bootstrap的容器里面。

标签嵌套

从上图可以看出，整个过程就是直接使用标签嵌套，几乎没有手动添加额外的代码。编写完代码之后保存，进入网站后台，点“生成”，更新文档HTML，把HTML文档重新生成一下，前台网页打开我们前面发布的文章，看看是否是想要的格式。

如上图中我的排版基本上可以了，还头部文件和尾部没有写，调整一下自适应，在浏览器空白处点鼠标右键，选择“审查元素”，调整宽度检查在不同宽度的屏幕上是否达到了想要的结果。

整个制作过程的难点一在于对bootstrap自适应代码的熟悉程度，如果记不住直接打开帮助文档一边看一边写；难点二是对织梦标签的熟悉程度，这个捷径的方法是直接修改默认模板，嵌套bootstrap代码，这样就可以不用去查哪个标签要怎么用了。更多技术问题欢迎留言交流~

想了解更多精彩内容，快来关注陆柏熺