bootstrap 初学 1

最新推荐文章于 2024-02-22 13:37:46 发布

lvlvforever

最新推荐文章于 2024-02-22 13:37:46 发布

阅读量763

点赞数

分类专栏： bootstrap 学习

本文链接：https://blog.csdn.net/lvlvforever/article/details/11956063

版权

bootstrap 学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

心血来潮想做网站，以前在青岛朋友公司搭建过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

然后贴上代码

	
	<!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组件的使用啦

lvlvforever

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
bootstrap 初学 1

心血来潮想做网站，以前在青岛朋友公司搭建过LAMP服务器，使用wordpress做了一个简单的首页。也算是有点基础，于是想搭建一个完整的网站出来，就要学学前端。网上看了看，据说bootstrap不错，毕竟是大公司twitter出品，品质应该不凡，又是开源的，看着样子也特别高端大气上档次，低调奢华有内涵，肯定错不了！先介绍一下bootstrap，Bootstrap是Twitte
复制链接

扫一扫