发表于： 2017-03-23 23:55:32
2 718
今天的事情：准备小课堂，讲解bootstrap的常用组件。
一、背景及优点
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。使用它我们可以很方便的直接使用已经准备好的组件和插件来DIY我们的项目，可以大大加快我们开发进度，从而提升开发效率，并且现在由于使用的人比较多，有问题也更容易解决。
二、环境搭建
1.下载bootstrap的安装包解压缩到所需要的项目文件夹 http://v3.bootcss.com/getting-started/#download 选择以编译并压缩好的文件
2.下载jqurey并放入解压好的bootstrap文件夹。https://jquery.com/
3.设置到导入html文件
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<title>task8</title>
</head>
<body>
<!--jqurey文件一定要在js文件前引入-->
<script src="bootstrap-3.3.7-dist/jquery-3.2.0.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
三、常用的组件
1.字体图标
在bootstrap中已经有200种以上的字体图标可供我们选择，字体图标是比较常用的。举例代码如下，有兴趣的同学可以去教学网站搜索有关字体图标的代码。
<a href="#"><span class="glyphicon glyphicon-home"></span></a>
<span class="glyphicon glyphicon-search"></span>
</br>
添加完也可以用css控制起大小，颜色、位置，就当作字体看待就可以
2.按钮组。
按钮是非常常用的组件，可以添加链接，样式等等，相当于盒子。
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span> 按钮</button>
.btn-lg{
background-color: #00A000;
}
我们为其添加了背景颜色，可以看到直接发生了变化，说明其他属性也是完全支持的。
四、扩展思考
1、还有其他的前端框架吗？
答案是当然有的，只不过随着技术的日新月异，前端的技术为了更好服务消费者，也在不断进步，框架也是不断在更新的，有的框架现在看来已经被废弃了，有的还在不断完善，具体在开发中使用那些框架还需要根据项目具体判断。
2、如何创建自己的框架。
本来以为创建自己框架是很难的，其实最基础的框架我们自己也可以简单的写，只不过我们考虑的结构，兼容性和易用性等还不是很全面。如果我们能自己开发出易用性强而且易维护的框架，相信离赢取白富美，走上人生巅峰不远了！
五、更多谈论
使用bootstrap创建风格独特的个人站。
使用预设的框架加上自己的理解可以轻松组建出自己的网站（然而身为菜鸟的我还没有按么厉害。。。），受限制的只是自己的能力和想象力，希望大家一起努力，早日走上人生巅峰！
返回列表
评论