[Directory]3. web page development
Well, I originally wanted to write a separate bootstrap chapter, but the front-end does not have much to write. Here we can directly develop it based on the actual situation. As a WEB application, I used to finish the desired page template first, and then modify it based on razar or the django template used here. The artist is really not very good. P has a bad figure, so it is generally used with ready-made open-source frameworks. Here we choose the very popular bootstrap. Because we are too lazy to change CSS, we use all the native code, it is not modified.
Here, we emphasize our goal to make a simple website for error query during development and provide corresponding error solutions.
With such a goal, we need the following web pages:
Yes, it is very simple, and there are very few pages. First, let's give a few page Diagrams (the website management department branch will introduce the maintenance page later)
<! DOCTYPE html> <Script src = "/media/javascript/jquery-1.11.1.js"> </script>
<Script src = "/media/bootstrap/js/bootstrap. js"> </script>
<Link href = "/media/bootstrap/css/bootstrap.css" rel = "stylesheet"/>
</Head>
<Body>
<Nav class = "navbar-default navbar-fixed-top" role = "navigation">
<Div class = "container"> <div class = "row"> <div class = "col-md-3"> </div> <div class = "col-md-6"> <div class = "navbar-header"> <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "# bs-example-navbar-collapse-1"> <span class = "sr-only"> Toggle navigation </span> <span class = "icon-bar"> </span> <span class = "icon-bar"> </span> <span class = "icon-bar"> </span> </button> <a class = "navbar-brand" href = "#"> </a> </div> <div class =" collapse navbar-collapse "id =" bs-example-navbar-collapse-1 "> <ul class =" nav navbar-nav -d "> <li> <a href ="/"> homepage </a> </li> <a href =" # "> recommended </a> </li> </ul> <form class = "navbar-form pull-right form-inline" action = "/search/"> <div class = "form-group"> <input type = "text" class = "form-control" name = "q" value = "{q | default: ''}}"> </div> <div class =" form-group "> <button type =" submit "class =" btn-default "> Go </button> </div> </form> </div> </nav> <div class = "spliter"> </div> <div class = "container"> <div class = "row"> <div class = "col-md-3"> <div> & nbsp; </div> {% block widget-nav %} {% endblock %} </div> <div class = "col-md-6"> <div> & nbsp; </div >{% block content %}{% endblock %}</div> <footer class = "footer"> <p> XXXXXXXXXXXXXXXX | powered By | <a href = "http://www.miibeian.gov.cn/" target = "_ blank"> XXXXXX Beijing ICP filing system </a> | XXXXXXXX Beijing Public Network Security System </p> </footer> </body>
We have defined/media/as the root directory of the static file.(Build and configure the Django Development Environment),Therefore, we put the entire bootstrap directory under/media/, and introduce jquery. js and bootstrap.jsto and bootstrap.css. Pay attention to the order of jquery and bootstrap, and introduce relative paths.
First of all, let's talk about the bootstrap part. The display effect on the big screen is shown in the above three figures, and it will be automatically switched to a small screen. This is an advantage of responsive design, we can make our site adaptive to various types of devices. For detailed principles and implementation methods, please read the bootstrap source code on your own.
{%} Indicates the command, and {} indicates the variable. The command requires a corresponding {% end-op %} block, which is inconvenient than razar. In base.html, we define three blocks:
{% block title %}{% endblock %}
{% block widget-nav %}{% endblock %}
{% block content %}{% endblock% }
Simply put, similar to section in razar, if a block with the same name is defined in the inherited sub-template, the content between the corresponding blocks in the master is completely replaced, the above three names and corresponding regions should easily show what they are doing.
The detailed implementation of block involves the input parameters, so we will discuss in detail in the implementation of the app.
PS.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
