Home > Developer > Web Develop
Well, originally wanted to write a chapter bootstrap, but the front-end is really nothing to write, here we direct the actual practice directly to engage in it. I am used to doing the web first to finish the desired page template, and then based on Razar or the Django template used here to modify. Art is really not very good, p have a bad picture, so generally use off-the-shelf open source framework, where we chose the now very popular bootstrap, because too lazy to change the CSS, so all with the original code, basic without modification.
Here we emphasize our goal, do a simple development error query site, but also need to provide a corresponding error solution
With this goal, we probably need a few web pages like this:
Right, Gray often simple, the page is very small, first give a few pages of the graph bar (Maintenance page after the Site Management Section will introduce)
Here the page common header and footer we can put on a base.html page, the content page through the template inheritance implementation, the specific code is as follows:
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <title>Template-{% block title%}{% Endblock%}</title>
<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 navbar-default navbar-fixed-top" role= " Navigation ">
<Divclass= "Container"> <Divclass= "Row"> <Divclass= "Col-md-3"></Div> <Divclass= "Col-md-6"> <Divclass= "Navbar-header"> <Buttontype= "button"class= "Navbar-toggle"Data-toggle= "Collapse"Data-target= "#bs-example-navbar-collapse-1"> <spanclass= "Sr-only">Toggle Navigation</span> <spanclass= "Icon-bar"></span> <spanclass= "Icon-bar"></span> <spanclass= "Icon-bar"></span> </Button> <aclass= "Navbar-brand"href="#"> <imgsrc= "/media/image/icon.png"> </a> </Div> <Divclass= "Collapse Navbar-collapse"ID= "Bs-example-navbar-collapse-1"> <ulclass= "Nav navbar-nav nav-d"> <Li> <ahref="/">Home</a> </Li> <Li> <ahref="#">Recommended</a> </Li> </ul> <formclass= "Navbar-form pull-right form-inline"Action= "/search/" > <Divclass= "Form-group"><inputtype= "text"class= "Form-control"name= "Q"value= "{{Q | | default: '}}" ></Div> <Divclass= "Form-group"><Buttontype= "Submit"class= "Btn Btn-default" >Go</Button></Div> </form> </Div> </Div> </Div> </Div></nav><Divclass= "Spliter"></Div><Divclass= "Container"> <Divclass= "Row"> <Divclass= "Col-md-3"> <Div> </Div>{% block Widget-nav%} {% Endblock%}</Div> <Divclass= "Col-md-6"> <Div> </Div>{% block content%} {% Endblock%}</Div> </Div></Div><Footerclass= "Footer"> <P>xxxxxxxxxxxxxxxx | Powered by |<ahref= "http://www.miibeian.gov.cn/"Target= "_blank">Beijing ICP 备 xxxxxx No.</a>| Beijing Public network ICP XXXXXXXX</P></Footer></Body></HTML>
We have defined/media/as the root of the static file (the Django development environment is set up and configured), so we put the bootstrap entire directory under/media/and introduced Jquery.js, Bootstrap.js and BOOTSTRAP.CSS, note the order of jquery and Bootstrap, and note the introduction of relative paths.
First of all, the bootstrap part, in the large screen display effect as shown in the above three pictures, and switch to a small screen will automatically switch to, this is the advantage of responsive design, can make our site adaptive to all types of equipment, The concrete principle and realization way please read the bootstrap source code yourself.
In the Django Template section, Django tempalte the instruction with {%%} ,{{}} represents a variable, and the directive needs to have a corresponding {%end-op%} block, which is somewhat inconvenient than Razar. In base.html, we defined three blocks, respectively
{% block title%} {% Endblock%}
{% block Widget-nav%} {% Endblock%}
{% block content%} {% endblock%}In short, like the section in Razar, in the inherited sub-template, if you define a block of the same name, then the content of the corresponding block in the master is replaced completely, the above three from the name and the corresponding area should be easy to see what it is.
The detailed implementation in block is related to the parameters passed in, so we discuss them 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
