Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS,HTML 和 JS 的集合,Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站,其中包括以下组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。
大学生使用bootstrap前端框架制作网页时掌握一些基本使用技巧可以事半功倍。
一、框架的导入及使用方法
导入框架:需要在html代码最前方加上如下代码:
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
同时,为了使用该框架,必须将html代码放在一个class为 **container-fluid** 的div里面
二、图片适配
让图片完美适配页面的宽度,只需加上如下属性: `class=”img-responsive”`
三、控件布局、操作
1、设置文字居中
<h2 class="text-center">your text</h2>
2、按钮基本设置
class中添加btn,就成为了bootstrap的按钮风格
<button class="btn">like</button>
按钮默认颜色也可以有属性直接设置,默认为蓝色
<button class="btn btn-block btn-primary">Like</button>
3、水平布局
bootstrap当真是把水平布局变得十分简单了,它有一种类似于table的方法,但是使用起来十分方便。
#leftDiv
#rightDiv
4、添加FontIcon
这里添加的是Font Awesome Icons,是一个图标库,使用它需要在代码前加上
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
如下代码就是点赞的图标
<i class="fa fa-thumbs-up"></i>
如果需要换成其他图标,只需需改fa-thumbs-up为其他就行了。