BootStrap学习笔记-安装与配置

BootStrap是一个十分强大而又简洁的前端开发框架,我学习了一阵子以后瞬间就喜欢上了这个东西,它有很多优点,对我而言,我最喜欢的两个理由:一是漂亮,无论是按钮、表格、表单还是警告框、导航栏,都非常好看,小清新的感觉;二是省力,BootStrap已经帮程序员们写好了基本的css和js文件,我们只需要设计页面各个组件的布局,不需要操心颜色和样式了。

项目官方地址:https://github.com/twbs/bootstrap/

下载源文件:https://github.com/twbs/bootstrap/archive/v3.3.2.zip

下载编译好后的文件(建议):https://github.com/twbs/bootstrap/releases/download/v3.3.2/bootstrap-3.3.2-dist.zip

下载编译后的文件压缩包,​解压发现有三个文件夹:css文件夹、fonts文件夹、js文件夹。

需要注意的是,所有的BootStrap都需要jQuery,所以还需要额外下载jQuery.js放到js文件夹里,下载地址:http://jquery.com/download/。

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   ├── bootstrap.js
│   └── jquery.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
下面就可以开始使用bootstrap设计界面了:

新建一个html文件,写好基本的代码,

[html]

<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<meta name=”author” content=”小金钟”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<!– Bootstrap –>
<link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
</head>
<body>
<h1>Hello, world!</h1>
<script src=”http://code.jquery.com/jquery.js”></script>
<script src=”js/jquery.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>

[/html]

注意第12行调用jQuery的时候如果用网址code.jquery.com/jquery.js能保证每次都用最新的jQuery插件,但是国内一些用户可能无法访问jquery.com网址,所以建议还是把js文件下载到自己网站上调用,例如第13行。

之后就是学习BootStrap里的各种组件,然后往网页里写内容了, 可以参考一些中文网站如:www.bootcss.com,cnbootstrap.com等等

Tags: ,

Leave a Reply

You must enable javascript to see captcha here!