6 快速制作模板的技巧1

• 以上节课为了,打开网站根目录

  
  
  

  image.png

• 在(C:\myphp_www\PHPTutorial\WWW)目录下创建一个demo文件夹

  
  
  

  image.png

• (C:\myphp_www\PHPTutorial\WWW\demo)再打开demo文件夹,创建一个lib文件夹

image.png

• 然后(C:\myphp_www\PHPTutorial\WWW\demo\lib)再在lib文件夹下创建两个文件夹,一个是bootstrap,一个是jquery,

  
  
  

  image.png

• 然后把jquery的源码复制到jquery文件夹,bootstrap源码复制到bootstrap文件夹(源码从网上下载)
  jquery

  
  
  

  image.png
  
  

  bootstrap

  
  
  

  image.png

下面开始创建模板(C:\myphp_www\PHPTutorial\WWW)

因为所创建的lib目录分别存放着第三方类库,要用到它
下面打开自己喜欢用的编辑器(以sublime为例)
将demo项目导入到sublime中

image.png

打开bootstrap网站( https://v3.bootcss.com/)

image.png

然后在起步中找一下它的基本模板复制复制一下

image.png

基本模板

  
    
    
    
    
    

    
    

    
    
    
  
  
    
你好，世界！

    
    
    
    
  

然后在demo目录下创建index.php

image.png

然后将基本模板代码复制到index.php

image.png

然后在这个模板中需要将lib目录下的第三方类库引入到index.php
修改index.php的代码

image.png

index.php

  
    
    
    
    
    

    
    

    
  
  
    
你好，世界！

    
    
    
    
  

一个比较简单的界面就做完了

然后测试,找个表单来测试,点击全局css样式

image.png

• 随便选个表单,

  
  
  

  image.png
  
  
  

  image.png
• index.php

  
    
    
    

    

  
    

    
  
  
    

  

    Email address
    
  
  

    Password
    
  
  

    File input
    
    
Example block-level help text here.
  
  

    
       Check me out
    
  
  Submit


   
    

    
  

然后运行,怎么运行?

同样添加域名(目录C:\myphp_www\PHPTutorial\WWW)然后点击工具箱的重启

image.png

然后在浏览器输入(localhost/demo/)
效果图

image.png