Bootstrap入门

一、概念

Bootstrap,是目前很受欢迎的前端开发的框架。Bootstrap 基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
        框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。
        好处
            1. 定义了很多的css样式和js插件。开发人员直接可以使用这些样式和插件得到丰富的页面效果。
            2. 响应式布局。
                * 同一套页面可以兼容不同分辨率的设备。

 

二、下载bootstrap

1.进入bootstrap中文网

2.来到下载页面 https://v3.bootcss.com/getting-started/#download

Bootstrap入门

3.选择 用于生产环境的Bootstrap 下载即可

Bootstrap入门

4.下载完成,下面为下载的压缩包,上面是解压后的

 

三、导入Bootstrap

1.将下载好的Bootstrap解压导入项目

Bootstrap入门

2.到bootstrap中文网的起步中往下拖,拖到基本模板

Bootstrap入门

Bootstrap入门

3.将基本模板的代码复制下来,并将其中导入的css、js、jq(官网下即可)修改成自己下载的

注:如果不下载 bootstrap,则可以直接用该模板,并直接到第四步

Bootstrap入门

 

四、使用Bootstrap

1.到bootstrap中文网下,找自己需要的样式、组件等,直接将其代码复制下来粘贴到自己代码里即可

例如:想使用下图的 绿色成功 按钮,则直接将其相应的代码复制粘贴即可

Bootstrap入门

粘过来后的代码如下:

Bootstrap入门

效果如下:

Bootstrap入门