2.4 基于bootstrap写个页面

建立一个模版页面

1、在template目录下新建一个webpage.html模版页面，代码如下：
代码有点长，我给予细细注释：

 
 
 
 

    

      






 
 
 
 
 
  
 
    
        Toggle navigation
        
        
        
     
    {{ APPName }}
  
 
  
  
  


      
      

        
{{ username }} (current)
        
常用链接
        

          我的链接 
          

            
QQ空间
            
微博
            

            
我的网站
          
        
      

      
      

        
注册
        
登陆
      
   

      
      

        

          
        
        查询
      
    
  
 
 


 
 









 





    

        

            
 
            
Back to top
        
    

2、在/static/css／目录中建立一个style.css文件。作用是用来写自己的css，目前干了两件事：一是字体，二是控制navbar的距离。

body,button, input, select, textarea,h1 ,h2, h3, h4, h5, h6 { 
    font-family:"HanHei SC","PingFang SC","Helvetica Neue","Helvetica","STHeitiSC-Light","Arial",sans-serif;
}

body { padding-top: 50px; }

3、修改index视图函数中的rend_template文件为刚才建立的webpage.html：

return render_template('webpage.html',username=username)

4、运行，达到预期效果。