心血来潮想做网站,以前在青岛朋友公司搭建过LAMP服务器,使用wordpress做了一个简单的首页。
也算是有点基础,于是想搭建一个完整的网站出来,就要学学前端。网上看了看,据说bootstrap不错,
毕竟是大公司twitter出品,品质应该不凡,又是开源的,看着样子也特别高端大气上档次,低调奢华有内涵,肯定错不了!
先介绍一下bootstrap,Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。是一个CSS/HTML框架,一个词就是优雅。大公司出品,值得信赖啊
刚开始学习前端,就只会一点html jsp什么的,尴尬的是现在对前端的范围 内容都不是特别清楚,只能慢慢的看。
我的理解是,跟C语言类似,bootstrap提供了一个库,一个UI库,在html文件中引入了,就可以使用其中定制好的UI组件,因为是
开源的,应该可以自己更改一些具体的UI组件的参数,使得更适合自己的网站特性,这就应该是属于定制了。
使用步骤在其官方网站都有说明,我记录下我的安装过程。
1 下载官方的编译好的bootstrap,或者下载源码。
2 然后将其解压缩,得到一个dist文件夹,里面是编译好的文件。将文件放到你的html源文件同一个目录(目录的位置自己定,基本没啥限制)
我的目录结构是 d:\html\hello.html
d:\html\dist
3 在浏览器里面访问一下这个文件即可,比如我的位置是file:///D://html//hello.html
上面源文件的效果图如下:这样就接下来就可以学习具体的UI组件的使用啦
也算是有点基础,于是想搭建一个完整的网站出来,就要学学前端。网上看了看,据说bootstrap不错,
毕竟是大公司twitter出品,品质应该不凡,又是开源的,看着样子也特别高端大气上档次,低调奢华有内涵,肯定错不了!
先介绍一下bootstrap,Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。是一个CSS/HTML框架,一个词就是优雅。大公司出品,值得信赖啊
刚开始学习前端,就只会一点html jsp什么的,尴尬的是现在对前端的范围 内容都不是特别清楚,只能慢慢的看。
我的理解是,跟C语言类似,bootstrap提供了一个库,一个UI库,在html文件中引入了,就可以使用其中定制好的UI组件,因为是
开源的,应该可以自己更改一些具体的UI组件的参数,使得更适合自己的网站特性,这就应该是属于定制了。
使用步骤在其官方网站都有说明,我记录下我的安装过程。
1 下载官方的编译好的bootstrap,或者下载源码。
2 然后将其解压缩,得到一个dist文件夹,里面是编译好的文件。将文件放到你的html源文件同一个目录(目录的位置自己定,基本没啥限制)
我的目录结构是 d:\html\hello.html
d:\html\dist
然后贴上代码
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<!-- link引用bootstrap文件,注意一下路径不要搞错了 -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
3 在浏览器里面访问一下这个文件即可,比如我的位置是file:///D://html//hello.html
上面源文件的效果图如下:这样就接下来就可以学习具体的UI组件的使用啦