我们这个网站项目是基于 django + bootstrap 框架搭建的，其中的 bootstrap 是美国Twitter公司推出的基于 HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

在django 中使用bootstrap很简单，使用 pip install django-bootstrap4 下载安装，并将 bootstrap4 添加到 INSTALLED_APPS 中，在对应的html页面中添加  {% load bootstrap4 %} 即可。

bootstrap 目前有数个版本，用的比较多的是 bootstrap3 与 bootstrap4，但是在实际使用的过程中作者发现 django-bootstrap3 与 django-bootstrap4 这两个包在部署到服务器后会出现冲突的情况，导致访问页面时出现 500 的错误，目前未能够解决，如果有解决这个问题的办法请联系作者（suzh9@mail2.sysu.edu.cn） ，非常感谢。

我们在该项目中使用的是 django-bootstrap4，详细的使用方法可以参考 Bootstrap中文网 以及 Bootstrap—菜鸟教程，除此之外，很多在线网站提供了 bootstrap可视化设计的功能，具体参考 bootstrap UI 编辑器， 推荐使用 Bootstrap可视化布局系统。但是发现布局在本地的网页上应用的时候会有所差别，需要进一步的研究。

bootstrap3 与 bootstrap4 的区别不是很大，但是有些地方还是需要注意的，下面会简单说一下我踩过的坑，希望对大家有所帮助。

 

1.Bootstrap加载jquery

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。如果我们使用bootstrap中没有加载jQuery的话则会出现部分js工具无法使用。

配置的方法如下：在Schnee/settings.py中添加以下代码（注意对应不同的bootstrap版本，有点坑）：

BOOTSTRAP4 = {'include_jquery': True,
}

 

2.Bootstrap4中的图标问题

在引入原来的 Lenote 项目的 users 的邮箱功能的时候，作者发现出现了图标缺失的情况，经检查发现在stackoverflow上有如下说明

原来是Bootstrap3中的 Glyphicons 字体图标 在Bootstrap中被移除了，需要使用类似于 Linearicons 等外部图标库，但是如果我们还是需要使用原来的 Glyphicons字体图标 该怎么办呢？

参考博客 bootstrap4中的图标Glyphicons在Angular5项目中应用问题 中提出了这样一个方法：自己动手修改 bootstrap.css 文件，将图标的相关代码添加进去，同时设置依赖的图标字体文件。

 

具体步骤：

1. 从bootstrap3的库中将 glyphicons-.eot、glyphicons-.ttf、glyphicons-*.svg 这三个文件复制到对应目录的static/font/文件夹下。

                            

2. 将下面长长的代码添加到 static/css/bootstrap.css 的末尾（注意：如下代码依赖glyphicons-.eot、glyphicons-.ttf、glyphicons-*.svg 文件）

@font-face {font-family: 'Glyphicons Halflings';src: url('../fonts/glyphicons-halflings-regular.eot');src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}.glyphicon {position: relative;top: 1px;display: inline-block;font-family: 'Glyphicons Halflings';font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.glyphicon-asterisk:before {content: "\002a";
}.glyphicon-plus:before {content: "\002b";
}.glyphicon-euro:before,
.glyphicon-eur:before {content: "\20ac";
}.glyphicon-minus:before {content: "\2212";
}.glyphicon-cloud:before {content: "\2601";
}.glyphicon-envelope:before {content: "\2709";
}.glyphicon-pencil:before {content: "\270f";
}.glyphicon-glass:before {content: "\e001";
}.glyphicon-music:before {content: "\e002";
}.glyphicon-search:before {content: "\e003";
}.glyphicon-heart:before {content: "\e005";
}.glyphicon-star:before {content: "\e006";
}.glyphicon-star-empty:before {content: "\e007";
}.glyphicon-user:before {content: "\e008";
}.glyphicon-film:before {content: "\e009";
}.glyphicon-th-large:before {content: "\e010";
}.glyphicon-th:before {content: "\e011";
}.glyphicon-th-list:before {content: "\e012";
}.glyphicon-ok:before {content: "\e013";
}.glyphicon-remove:before {content: "\e014";
}.glyphicon-zoom-in:before {content: "\e015";
}.glyphicon-zoom-out:before {content: "\e016";
}.glyphicon-off:before {content: "\e017";
}.glyphicon-signal:before {content: "\e018";
}.glyphicon-cog:before {content: "\e019";
}.glyphicon-trash:before {content: "\e020";
}.glyphicon-home:before {content: "\e021";
}.glyphicon-file:before {content: "\e022";
}.glyphicon-time:before {content: "\e023";
}.glyphicon-road:before {content: "\e024";
}.glyphicon-download-alt:before {content: "\e025";
}.glyphicon-download:before {content: "\e026";
}.glyphicon-upload:before {content: "\e027";
}.glyphicon-inbox:before {content: "\e028";
}.glyphicon-play-circle:before {content: "\e029";
}.glyphicon-repeat:before {content: "\e030";
}.glyphicon-refresh:before {content: "\e031";
}.glyphicon-list-alt:before {content: "\e032";
}.glyphicon-lock:before {content: "\e033";
}.glyphicon-flag:before {content: "\e034";
}.glyphicon-headphones:before {content: "\e035";
}.glyphicon-volume-off:before {content: "\e036";
}.glyphicon-volume-down:before {content: "\e037";
}.glyphicon-volume-up:before {content: "\e038";
}.glyphicon-qrcode:before {content: "\e039";
}.glyphicon-barcode:before {content: "\e040";
}.glyphicon-tag:before {content: "\e041";
}.glyphicon-tags:before {content: "\e042";
}.glyphicon-book:before {content: "\e043";
}.glyphicon-bookmark:before {content: "\e044";
}.glyphicon-print:before {content: "\e045";
}.glyphicon-camera:before {content: "\e046";
}.glyphicon-font:before {content: "\e047";
}.glyphicon-bold:before {content: "\e048";
}.glyphicon-italic:before {content: "\e049";
}.glyphicon-text-height:before {content: "\e050";
}.glyphicon-text-width:before {content: "\e051";
}.glyphicon-align-left:before {content: "\e052";
}.glyphicon-align-center:before {content: "\e053";
}.glyphicon-align-right:before {content: "\e054";
}.glyphicon-align-justify:before {content: "\e055";
}.glyphicon-list:before {content: "\e056";
}.glyphicon-indent-left:before {content: "\e057";
}.glyphicon-indent-right:before {content: "\e058";
}.glyphicon-facetime-video:before {content: "\e059";
}.glyphicon-picture:before {content: "\e060";
}.glyphicon-map-marker:before {content: "\e062";
}.glyphicon-adjust:before {content: "\e063";
}.glyphicon-tint:before {content: "\e064";
}.glyphicon-edit:before {content: "\e065";
}.glyphicon-share:before {content: "\e066";
}.glyphicon-check:before {content: "\e067";
}.glyphicon-move:before {content: "\e068";
}.glyphicon-step-backward:before {content: "\e069";
}.glyphicon-fast-backward:before {content: "\e070";
}.glyphicon-backward:before {content: "\e071";
}.glyphicon-play:before {content: "\e072";
}.glyphicon-pause:before {content: "\e073";
}.glyphicon-stop:before {content: "\e074";
}.glyphicon-forward:before {content: "\e075";
}.glyphicon-fast-forward:before {content: "\e076";
}.glyphicon-step-forward:before {content: "\e077";
}.glyphicon-eject:before {content: "\e078";
}.glyphicon-chevron-left:before {content: "\e079";
}.glyphicon-chevron-right:before {content: "\e080";
}.glyphicon-plus-sign:before {content: "\e081";
}.glyphicon-minus-sign:before {content: "\e082";
}.glyphicon-remove-sign:before {content: "\e083";
}.glyphicon-ok-sign:before {content: "\e084";
}.glyphicon-question-sign:before {content: "\e085";
}.glyphicon-info-sign:before {content: "\e086";
}.glyphicon-screenshot:before {content: "\e087";
}.glyphicon-remove-circle:before {content: "\e088";
}.glyphicon-ok-circle:before {content: "\e089";
}.glyphicon-ban-circle:before {content: "\e090";
}.glyphicon-arrow-left:before {content: "\e091";
}.glyphicon-arrow-right:before {content: "\e092";
}.glyphicon-arrow-up:before {content: "\e093";
}.glyphicon-arrow-down:before {content: "\e094";
}.glyphicon-share-alt:before {content: "\e095";
}.glyphicon-resize-full:before {content: "\e096";
}.glyphicon-resize-small:before {content: "\e097";
}.glyphicon-exclamation-sign:before {content: "\e101";
}.glyphicon-gift:before {content: "\e102";
}.glyphicon-leaf:before {content: "\e103";
}.glyphicon-fire:before {content: "\e104";
}.glyphicon-eye-open:before {content: "\e105";
}.glyphicon-eye-close:before {content: "\e106";
}.glyphicon-warning-sign:before {content: "\e107";
}.glyphicon-plane:before {content: "\e108";
}.glyphicon-calendar:before {content: "\e109";
}.glyphicon-random:before {content: "\e110";
}.glyphicon-comment:before {content: "\e111";
}.glyphicon-magnet:before {content: "\e112";
}.glyphicon-chevron-up:before {content: "\e113";
}.glyphicon-chevron-down:before {content: "\e114";
}.glyphicon-retweet:before {content: "\e115";
}.glyphicon-shopping-cart:before {content: "\e116";
}.glyphicon-folder-close:before {content: "\e117";
}.glyphicon-folder-open:before {content: "\e118";
}.glyphicon-resize-vertical:before {content: "\e119";
}.glyphicon-resize-horizontal:before {content: "\e120";
}.glyphicon-hdd:before {content: "\e121";
}.glyphicon-bullhorn:before {content: "\e122";
}.glyphicon-bell:before {content: "\e123";
}.glyphicon-certificate:before {content: "\e124";
}.glyphicon-thumbs-up:before {content: "\e125";
}.glyphicon-thumbs-down:before {content: "\e126";
}.glyphicon-hand-right:before {content: "\e127";
}.glyphicon-hand-left:before {content: "\e128";
}.glyphicon-hand-up:before {content: "\e129";
}.glyphicon-hand-down:before {content: "\e130";
}.glyphicon-circle-arrow-right:before {content: "\e131";
}.glyphicon-circle-arrow-left:before {content: "\e132";
}.glyphicon-circle-arrow-up:before {content: "\e133";
}.glyphicon-circle-arrow-down:before {content: "\e134";
}.glyphicon-globe:before {content: "\e135";
}.glyphicon-wrench:before {content: "\e136";
}.glyphicon-tasks:before {content: "\e137";
}.glyphicon-filter:before {content: "\e138";
}.glyphicon-briefcase:before {content: "\e139";
}.glyphicon-fullscreen:before {content: "\e140";
}.glyphicon-dashboard:before {content: "\e141";
}.glyphicon-paperclip:before {content: "\e142";
}.glyphicon-heart-empty:before {content: "\e143";
}.glyphicon-link:before {content: "\e144";
}.glyphicon-phone:before {content: "\e145";
}.glyphicon-pushpin:before {content: "\e146";
}.glyphicon-usd:before {content: "\e148";
}.glyphicon-gbp:before {content: "\e149";
}.glyphicon-sort:before {content: "\e150";
}.glyphicon-sort-by-alphabet:before {content: "\e151";
}.glyphicon-sort-by-alphabet-alt:before {content: "\e152";
}.glyphicon-sort-by-order:before {content: "\e153";
}.glyphicon-sort-by-order-alt:before {content: "\e154";
}.glyphicon-sort-by-attributes:before {content: "\e155";
}.glyphicon-sort-by-attributes-alt:before {content: "\e156";
}.glyphicon-unchecked:before {content: "\e157";
}.glyphicon-expand:before {content: "\e158";
}.glyphicon-collapse-down:before {content: "\e159";
}.glyphicon-collapse-up:before {content: "\e160";
}.glyphicon-log-in:before {content: "\e161";
}.glyphicon-flash:before {content: "\e162";
}.glyphicon-log-out:before {content: "\e163";
}.glyphicon-new-window:before {content: "\e164";
}.glyphicon-record:before {content: "\e165";
}.glyphicon-save:before {content: "\e166";
}.glyphicon-open:before {content: "\e167";
}.glyphicon-saved:before {content: "\e168";
}.glyphicon-import:before {content: "\e169";
}.glyphicon-export:before {content: "\e170";
}.glyphicon-send:before {content: "\e171";
}.glyphicon-floppy-disk:before {content: "\e172";
}.glyphicon-floppy-saved:before {content: "\e173";
}.glyphicon-floppy-remove:before {content: "\e174";
}.glyphicon-floppy-save:before {content: "\e175";
}.glyphicon-floppy-open:before {content: "\e176";
}.glyphicon-credit-card:before {content: "\e177";
}.glyphicon-transfer:before {content: "\e178";
}.glyphicon-cutlery:before {content: "\e179";
}.glyphicon-header:before {content: "\e180";
}.glyphicon-compressed:before {content: "\e181";
}.glyphicon-earphone:before {content: "\e182";
}.glyphicon-phone-alt:before {content: "\e183";
}.glyphicon-tower:before {content: "\e184";
}.glyphicon-stats:before {content: "\e185";
}.glyphicon-sd-video:before {content: "\e186";
}.glyphicon-hd-video:before {content: "\e187";
}.glyphicon-subtitles:before {content: "\e188";
}.glyphicon-sound-stereo:before {content: "\e189";
}.glyphicon-sound-dolby:before {content: "\e190";
}.glyphicon-sound-5-1:before {content: "\e191";
}.glyphicon-sound-6-1:before {content: "\e192";
}.glyphicon-sound-7-1:before {content: "\e193";
}.glyphicon-copyright-mark:before {content: "\e194";
}.glyphicon-registration-mark:before {content: "\e195";
}.glyphicon-cloud-download:before {content: "\e197";
}.glyphicon-cloud-upload:before {content: "\e198";
}.glyphicon-tree-conifer:before {content: "\e199";
}.glyphicon-tree-deciduous:before {content: "\e200";
}.glyphicon-cd:before {content: "\e201";
}.glyphicon-save-file:before {content: "\e202";
}.glyphicon-open-file:before {content: "\e203";
}.glyphicon-level-up:before {content: "\e204";
}.glyphicon-copy:before {content: "\e205";
}.glyphicon-paste:before {content: "\e206";
}.glyphicon-alert:before {content: "\e209";
}.glyphicon-equalizer:before {content: "\e210";
}.glyphicon-king:before {content: "\e211";
}.glyphicon-queen:before {content: "\e212";
}.glyphicon-pawn:before {content: "\e213";
}.glyphicon-bishop:before {content: "\e214";
}.glyphicon-knight:before {content: "\e215";
}.glyphicon-baby-formula:before {content: "\e216";
}.glyphicon-tent:before {content: "\26fa";
}.glyphicon-blackboard:before {content: "\e218";
}.glyphicon-bed:before {content: "\e219";
}.glyphicon-apple:before {content: "\f8ff";
}.glyphicon-erase:before {content: "\e221";
}.glyphicon-hourglass:before {content: "\231b";
}.glyphicon-lamp:before {content: "\e223";
}.glyphicon-duplicate:before {content: "\e224";
}.glyphicon-piggy-bank:before {content: "\e225";
}.glyphicon-scissors:before {content: "\e226";
}.glyphicon-bitcoin:before {content: "\e227";
}.glyphicon-btc:before {content: "\e227";
}.glyphicon-xbt:before {content: "\e227";
}.glyphicon-yen:before {content: "\00a5";
}.glyphicon-jpy:before {content: "\00a5";
}.glyphicon-ruble:before {content: "\20bd";
}.glyphicon-rub:before {content: "\20bd";
}.glyphicon-scale:before {content: "\e230";
}.glyphicon-ice-lolly:before {content: "\e231";
}.glyphicon-ice-lolly-tasted:before {content: "\e232";
}.glyphicon-education:before {content: "\e233";
}.glyphicon-option-horizontal:before {content: "\e234";
}.glyphicon-option-vertical:before {content: "\e235";
}.glyphicon-menu-hamburger:before {content: "\e236";
}.glyphicon-modal-window:before {content: "\e237";
}.glyphicon-oil:before {content: "\e238";
}.glyphicon-grain:before {content: "\e239";
}.glyphicon-sunglasses:before {content: "\e240";
}.glyphicon-text-size:before {content: "\e241";
}.glyphicon-text-color:before {content: "\e242";
}.glyphicon-text-background:before {content: "\e243";
}.glyphicon-object-align-top:before {content: "\e244";
}.glyphicon-object-align-bottom:before {content: "\e245";
}.glyphicon-object-align-horizontal:before {content: "\e246";
}.glyphicon-object-align-left:before {content: "\e247";
}.glyphicon-object-align-vertical:before {content: "\e248";
}.glyphicon-object-align-right:before {content: "\e249";
}.glyphicon-triangle-right:before {content: "\e250";
}.glyphicon-triangle-left:before {content: "\e251";
}.glyphicon-triangle-bottom:before {content: "\e252";
}.glyphicon-triangle-top:before {content: "\e253";
}.glyphicon-console:before {content: "\e254";
}.glyphicon-superscript:before {content: "\e255";
}.glyphicon-subscript:before {content: "\e256";
}.glyphicon-menu-left:before {content: "\e257";
}.glyphicon-menu-right:before {content: "\e258";
}.glyphicon-menu-down:before {content: "\e259";
}.glyphicon-menu-up:before {content: "\e260";
}

 

运行程序，检查图标情况，完工！