用bootstrap框架制作网页

 课程设计要做一个html网页,自己做的css样式实在是不堪入目,所以用了bootstrap框架,现总结如下:

(1):下载bootstrap:

用bootstrap框架制作网页_第1张图片

用bootstrap框架制作网页_第2张图片

点击下载后:

用bootstrap框架制作网页_第3张图片

下载解压后得到如下文件:

(2):将这个文件导入你的项目中,放在项目的根目录下,然后什么都不用做,接下来下载jquery,没有这个bootstrap的JavaScript不能用:

用bootstrap框架制作网页_第4张图片

用bootstrap框架制作网页_第5张图片

用bootstrap框架制作网页_第6张图片

下载后得到:

将它导入项目的根目录里,在项目的根目录上创建一个html文件,将以下bootstrap模版复制粘贴入html文件里:



  
    
    
    
    
    Bootstrap 101 Template

    
    

    
    
    
  
  
    

你好,世界!

(3):进入bootstrap可视化布局

用bootstrap框架制作网页_第7张图片

用bootstrap框架制作网页_第8张图片

布局好了之后点击下载:

用bootstrap框架制作网页_第9张图片

复制源码到你的html文件里,再加入自己的css和js样式就可以了。

你可能感兴趣的:(web前端)