（22）bootstrap 初识 + Font Awesome(字体图标库)
bootstrap作用就是简化布局
bootstrap是基于JQ的，所以内部代码使用的是jq语法
所以要使用bs，必须先倒入
1、head标签内倒入bs的css文件 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
2、body标签的后面导入js文件 ： <script src="js/jq.js"></script>
3、body标签的后面倒入bs的js文件 ： <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
bootstrap官网：http://www.bootcss.com/
1、
下载bootstrap
2、
3、
4、直接复制到项目目录
Font Awesome
下载网站：http://www.fontawesome.com.cn/
bs初识实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<h1>bootstrap是基于JQ的</h1>
<h2>快速帮助我们完成布局和样式</h2>
<!--bs下已经写了很多样式，导入后根据源码使用即可，比如按钮类名叫btn就会变成bs设置好的样式，再加一个类名就会变另外一种-->
<button class="btn btn-danger">按钮</button>
<div class="bg-success">div</div>
<h3>简单理解bs，给标签添加类名就可以获取bs提前写好的样式</h3>
<h3>固定结构下的固定类名不仅可以获得样式还可以获得事件</h3>
</body>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
深入了解实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap深入了解</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
i {
font-size: 30px;
}
</style>
</head>
<body>
<!--屏幕的尺寸和自适应-->
<!--什么是栅格系统：父级标签默认被平分12等分，子级可以选择占用几分-->
<!--container就是容器，相当于最外层套的一层,有padding默认值 0 15px-->
<div class="container">
<!--row：容器中的一行，有默认值margin：0 -15px，正好抵消container的padding-->
<div class="row">
<!--利用bs快速布局，栅格系统，自适应屏幕分辨率-->
<!--col四个值就是分别对应屏幕的大小，在对应的屏幕尺寸下这个页面占显示区域的几分-->
<div class="box bg-success .col-xs-1 .col-sm-6 .col-md-9 .col-lg-6">123</div>
</div> <!--快速形成表单,在bs的页面下找到对应的代码复制进来-->
<div class="row">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div> <!--快速创建图标,只要在组件里赋值需要的样式名字，黏贴到标签的类名即可-->
<!--这个叫字体图标，设置大小只要在style里设置标签的字体大小即可-->
<div class="row">
<i class="glyphicon glyphicon-qrcode"></i>
</div> <!--快速布局下拉框-->
<div class="row">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">呵呵</a></li>
<li><a href="#">嘻嘻</a></li>
<li><a href="#">Something else here</a></li>
<!--这个就是加线-->
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div> <!--快速添加分页标签-->
<div class="row">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="abcdef"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div> </body>
<script src="js/jq.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> <!--为分页符添加逻辑-->
<script>
$('.abcdef').click(function () {
alert('请点击')
})
</script>
</html>
（22）bootstrap 初识 + Font Awesome(字体图标库)的更多相关文章
- 在nuxt中引入Font Awesome字体图标库
介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...
- jQuery插件fontIconPicker配合FontAwesome字体图标库的使用
同样先上效果图: 怎么样,是不是很好看,jquery fontIconPicker这个插件做的很不错,支持分类,搜索,还有分页功能,可以自定义分页,具体的使用方法我就不一介绍了,我只说一下如何使用fo ...
- Font Awesome字体图标
1.什么是字体图标字体图标是一个包含许多图标的字体库.可以理解为一种特殊的字体,只不过里面包含的都是图标. 2.Font Awesome图标字体库Font Awesome是目前最受欢迎最全面的图标字体 ...
- css3 - 字体图标库使用方法
一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www. ...
- vue引入iconfont阿里字体图标库以及报错解决
下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader) ,记得--save ...
- 字体图标库 iconfont、iconmoon 的维护管理与使用探索
字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅... 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里 ...
- Awesome图标 | 如何在某些编辑软件中使用Font Awesome字体图标
文章目录 Font Awesome 字体图标 在某些编辑软件中使用 Font Awesome 字体图标 Font Awesome 为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 C ...
- uni-app在线引入阿里字体图标库
第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...
- 字体图标库 IcoMoon IconFont Font Awesome的使用
在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图标,字体图标任意放大缩小不会失 ...
随机推荐
- u-boot的内存分布
cpu会自动从NAND flash 中读取前4KB的数据放置在片内SRAM里(s3c2440是soc),同时把这段片内SRAM映射到nGCS0片选的空间(即0x00000000).cpu是从0x000 ...
- 【MVC】快速构建一个图片浏览网站
当抄完MusicStore时,你应该对MVC有一个比较清晰的认识了.接下来就需要做个网站来继续增加自己的知识了.那么,该做个什么网站呢.做个图片浏览网站吧,简单而实用. 简单设计 1.首先,页面中间是 ...
- 软件测试职业规划的思考（转）（作者Findyou
前言 入软件测试行至今已经8年多,承领导们的信任与重用,同事的支持与信任,我的职业发展算是相对较好,从入行到各类测试技术岗位,再到测试总监,每一步都刚刚好.最近在自身职业发展瓶颈,人生十字路口,静坐反 ...
- Linux如何从零开始搭建rsync+serync服务器（centOS6）
一.为什么要用Rsync+sersync架构? 1.sersync是基于Inotify开发的,类似于Inotify-tools的工具 2.sersync可以记录下被监听目录中发生变化的(包括增加.删除 ...
- python基础练习。
1,简单输入输出交互 输入姓名 name=input('请输入姓名:') 输入学号 number=input('请输入您的学号:') 输出姓名和学号 print('请确认您的姓名和学号:'name,n ...
- 第六节 静态的(static)和单例模式
main函数 主函数是一个特殊的函数,作为程序的入口,可以被jvm(虚拟器)调用 主函数的定义 public 表示该函数的访问权限是最大的. static 代表主函数随着类的加载就已经存在了. voi ...
- 百度地图API示例：鼠标绘制点线面 控件修改
需求 :在使用地图API时,绘制工具栏控件想自己选择哪些要,哪些不要. 可以查看相应的类:官网地址: http://api.map.baidu.com/library/DrawingManager/1 ...
- Oracle 一些注意点
number精度问题 Number(p,s): p和s都是可选的. p指精度(precision),即总位数.默认情况下精度为38.精度的取值范围为1~38. s指小数位(scale),小数点右边的位 ...
- WIN10-缩放与布局
HKEY_CURRENT_USER\Control Panel\Desktop\WindowMetrics\AppliedDPI230%----- 221225%----- 218220%----- ...
- pthread库实现一个简单的任务池
pthread库实现一个简单的任务池 类关系图: 说明: 1:TaskManager类管理Task类,Task类是一个纯虚类; 2:ThreadManager类管理Th ...