Bootstrap初步使用

由于我是主要进行后端程序的编写,最近接触了一款前端开发框架--Bootstrap,里面有很多美观,简洁的模板供我们使用,很方便,对我这样编写后端程序且还在意美观好看的人来说很实用,所以简单来说一下.


1)首先打开Bootstrap的官网--https://www.bootcss.com/.

2)打开很简洁的就能看到其中文文档(我选择的Bootstrap3),点进去,先下载Bootstrap.保存在本地.
Bootstrap初步使用_第1张图片

3)再点击下载的界面上方的菜单栏中先看起步一项,这都是各种程序,框架的第一步.在右侧的基本模板中是我们使用Bootstrap最基本的要素!

在官网中是这么介绍的"拷贝并粘贴下面给出的 HTML 代码,这就是一个最简单的 Bootstrap 页面了。"



  
    
    
    
    
    Bootstrap 101 Template

    
    

    
    
    
  
  
    

你好,世界!

4)在上方菜单栏中看全局CSS样式根据自己需求添加即可!


当我在我自己项目中使用时,具体是这样的:
1)首先要把下载下来的Bootstrap以及自己下载一个jQuery复制到项目的static文件夹下:
Bootstrap初步使用_第2张图片

2)在页面中添加:
Bootstrap初步使用_第3张图片

Bootstrap初步使用_第4张图片
注意:jquery和js的配置一般放在页面下方.

3)然后就可以在全局CSS样式中挑选自己喜欢的样式添加在对应的元素中了:
1596541705(1).png

1596541687(1).png

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