I. Introduction
In the previous section we have learned to use the template syntax to achieve the rendering of dynamic data is returned back to the front page, but the page is too monotonous, no css dress, could not bear to look ugly. The css \ js with respect to the back-end developers may write did not dig up or lack of experience, if there is no professional staff with the front end, the best way is to introduce ready-css front-end framework, Bootstrap is the best css one frame.
Two Django project introduced Bootstrap
1) downloaded from the download Bootstrap https://v3.bootcss.com/getting-started/#download Bootstrap, Bootstrap selected for download to the production environment; 2) arranged after the Bootstrap Bootstrap download path decompressed and placed in Django static directory (New specially designated for static files), then the settings.py disposed in the path, such as:
STATIC_URL = '/static/'STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"),
3) HTML introduction of Bootstrap CSS:
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
JS:
<script src="/static/bookms/js/jquery-3.3.1.min.js"></script><script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
Note: Bootstrap dependent on JQuery, it is necessary to introduce.
Three functions of Bootstrap
If this is the first contact Bootstrap, you might be wondering What the hell is it? Why do it? Twitter Bootstrap was launched a front-end testing framework, the popular will, which encapsulates pretty much controls on the tall, by using the controls in the html class name will be able to introduce the package of controls, make the page look pretty together. In addition, this page is the responsive layout, write once will automatically adapting PC, mobile phones, tablets and other devices. Standing on the shoulders of giants, it is not suddenly felt a lot easier.
IV use Bootstrap
Bootstrap offers many packaged controls, reference https://v3.bootcss.com/components/, [components] page, to borrow the words of the page, "numerous reusable components, including font icons, pull-down menus, navigation , alert box pop-up box, and much more. " Here is the Bootstrap page navigation component library management system used:
Slightly modified, it is for our use of:
Note that when using Bootstrap, according to the second part of the explanation, the html page introduction CSS \ JS.
other
About python to learn, share, exchange, I opened a micro-channel public number [small] python community , and interested friends can focus the next, welcome to join, build our own small circle, learning python together.