看程序学bootstrap1-简介

BootStrap 是Twitter的工程师开发的前端框架,可以非常方便的设计出好看的页面效果。
使用Bootstrap和不用的区别
在这里插入图片描述
使用Bootstrap 很简单,按照如下步骤进行即可。

步骤 1 :
因为bootstrap用到了html5的特性,为了正常使用,需要在最开头加上

步骤 2 : 导入js 导入css
接着导入js和css
Bootstrap需要JQuery才能正常工作,所以需要导入jquery.min.js
接着是 Bootstrap的css,里面定义了各种样式
最后是 Bootstrap的js,用于产生交互效果,比如关闭警告框
注:顺序不要搞错了,否则有一些效果会出不来。
首先是JQuery
然后是Bootstrap css
最后是Bootstrap js。
代码比较 复制代码

1<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> 2<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> 3<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> 4 5

步骤 3 : 套用class
接着就是出现BootStrap的效果,使用是非常简单的,只需要套用 bootstrap css中定义的class即可。
如按钮,增加class btn btn-success 就能有bootstrap的效果了

1<!DOCTYPE html> 2<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> 3<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> 4<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> 5 6<button class="btn btn-success">按钮</button> 7 8

步骤 4 : 本地测试
首先在右侧下载bootstrap.rar
解压后和html放在同一个目录下

1<!DOCTYPE html> 2<script src="js/jquery/2.0.0/jquery.min.js"></script> 3<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> 4<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> 5 6<button class="btn btn-success">按钮</button> 7 8

代码交流 2021