day 59Bootstrap自带图表和fontawesome图标导航和导航条 Bootstrap常用插件 sweetalert插件介绍...

上课随笔

day591.前情回顾Bootstrap初识1. Bootstrap版本3.3.7生产环境版2. 目录结构css   ../fonts/xx.xxfonts  --> 必须存在并且和css文件夹同级js3. 响应式开发<meta name="viewport" content="width=device-width, initial-scale=1">原理：CSS3 -> 媒体查询栅格系统1.container2.row3.col-xx(lg md sm xs)-xx(1~12) 列可以嵌套列列偏移(左边空几列)col-xx-offset-xx列排序col-xx-push-xxcol-xx-pull-xx4. 常用样式标题文本表单表格按钮图片颜色和背景色快速浮动pull-leftpull-right清除浮动clearfix

上节回顾

2. 今日内容字体图标<span class="glyphicon glyphicon-star-empty"></span>Font awesome图标1. 下载2. 文件目录cssfonts3. 使用首先在页面上引用font awesome图标的css文件<i class="fa fa-wechat" style="color: green"></i>变大fa-lg fa-2x fa-3x fa-4x fa-5x变宽fa-fw各种组件模态框1. modal要作为body标签的直接子元素$('#myModal').modal({keyboard: false})轮播图设置切换间隔为2秒，默认是5秒。$('.carousel').carousel({interval: 2000})扩展：sweetalert插件

今日内容

一、栅格系统的col示例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Title</title><link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body><div class="container"><div class="row"><div class="col-md-2"><div class="row"><div class="col-md-2">2-2</div><div class="col-md-10">2-2</div></div></div><div class="col-md-12">15</div></div>
</div><script src="jquery-3.2.1.min.js"></script>
</body>
</html>

栅格系统的col示例

二、登录系统

全局css样式：水平排列的表单

地址：https://v3.bootcss.com/css/

<form class="form-horizontal"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Email</label><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox"> Remember me</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">Sign in</button></div></div>
</form>

登录的源码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>fontawesome 图标示例</title><link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"><link rel="stylesheet" href="fontawesome/css/font-awesome.min.css"><link rel="stylesheet" href="fontawesome/web-fonts-with-css/css/fontawesome-all.css">
</head><body>
<div class="container"><i class="fa fa-wechat" style="color: green"></i><i class="fa fa-wechat fa-lg" style="color: green"></i><i class="fa fa-wechat fa-2x" style="color: green"></i><i class="fa fa-wechat fa-5x" style="color: green"></i><div class="fa-3x"><i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-notch fa-spin"></i><i class="fa fa-sync fa-spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i><i class="fas fa-camera-retro fa-xs"></i><i class="fas fa-camera-retro fa-sm"></i><i class="fas fa-camera-retro fa-lg"></i><i class="fas fa-camera-retro fa-2x"></i><i class="fas fa-camera-retro fa-3x"></i><i class="fas fa-camera-retro fa-5x"></i><i class="fas fa-camera-retro fa-7x"></i><i class="fas fa-camera-retro fa-10x"></i></div>
</div>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>

修改后的登录系统

三、自带字体图标使用示例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>自带字体图标使用示例</title><link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"><style>#my-heart:hover{color: greenyellow;}</style>
</head>
<body>
<div class="container"><span id="my-heart" class="glyphicon glyphicon-heart" aria-hidden="true"></span><div><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span></div>
</div>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>

自带字体图标使用示例

组件地点：https://v3.bootcss.com/components/

四、fontawesome图标使用示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>fontawesome图标使用示例</title><link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"><link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">
</head>
<body><div class="container"><i class="fa fa-wechat" style="color: green"></i><i class="fa fa-wechat fa-lg" style="color: green"></i><i class="fa fa-wechat fa-2x" style="color: green"></i><i class="fa fa-wechat fa-5x" style="color: green"></i><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><i class="fa fa-wifi fa-rotate-90 fa-3x fa-fw"></i><i class="fa fa-wifi fa-rotate-180 fa-3x fa-fw"></i><i class="fa fa-wifi fa-rotate-270 fa-3x fa-fw"></i><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-wechat fa-stack-1x" style="color: white"></i></span>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

fontawesome图标使用示例

图标的地址：https://fontawesome.com/how-to-use/svg-with-js

五、

转载于:https://www.cnblogs.com/number1994/p/8470771.html

day 59Bootstrap自带图表和fontawesome图标导航和导航条 Bootstrap常用插件 sweetalert插件介绍...相关推荐

在.NET中不安装Office使用EPPlus生成带图表(Chart)的Excel报表
在开发.NET应用中可能会遇到需要生成带图表(Chart)的Excel报表的需求,特别是在一些ASP.NET网站中,有时候我们并不能保证Web服务器上一定安装了Office组件,所以使用微软的Offi ...
fontawesome图标字体库
fontawesome图标字体库通过css类可以让你使用众多的图表,堪称一个图标字体的css框架了.Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包 ...
html怎么让图标动起来,让ICON生动起来纯CSS实现带动画的天气图标
让ICON生动起来纯CSS实现带动画的天气图标 1月 20, 2016 评论 (1) Sponsor CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都 ...
学习WPF——使用Font-Awesome图标字体
学习WPF--使用Font-Awesome图标字体原文:学习WPF--使用Font-Awesome图标字体图标字体介绍在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们 ...
第八十四节，css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用图片鼠标放上去遮罩效果,显示文字当鼠标放上去时 /*最外层div*/ .a{width: 384px;height: 240px;backgrou ...
直接在 CSS 中引用 FONTAWESOME 图标（附码表）
直接在 CSS 中引用 FONTAWESOME 图标(附码表) 因此我们如果不想用 Fontawesome 提供的类,只想在 css 里面引用图标的话,可以这样子,请自行脑补: .icon:befor ...
FontAwesome图标大全
FontAwesome图标大全 FontAwesome图标大全 FontAwesome 4.7.0 图标大全,共计675个图标,以及其在图标字体中的Unicode编码cheatsheet列表,非常方便 ...
字体图标在服务器上显示不出来,fontawesome图标字体库组件在服务器上显示不出来图标的解决...
这个组件在我所开发的网站中被大量使用,为网站增色不少.在本地测试的时候所有图标都能显示出来,可一到服务器上就显示不出来了.网上查列出了可能的原因.其一,IIS没有注册字体类型.经过检查,不存在这个问题 ...
html5 fa图标库,axure官方制作FontAwesome图标元件库V5.5.0版
1.下载并安装5.5.0版本的Font Awesome 5字体文件. 下载地址: 下载之后将文件解压缩,打开里面的"otfs"文件夹,安装"Font Awesome 5 ...

day 59Bootstrap自带图表和fontawesome图标导航和导航条 Bootstrap常用插件 sweetalert插件介绍...

day 59Bootstrap自带图表和fontawesome图标导航和导航条 Bootstrap常用插件 sweetalert插件介绍...相关推荐

最新文章

热门文章

day 59Bootstrap自带图表和fontawesome图标 导航和导航条 Bootstrap常用插件 sweetalert插件介绍...

day 59Bootstrap自带图表和fontawesome图标 导航和导航条 Bootstrap常用插件 sweetalert插件介绍...相关推荐

最新文章

热门文章

day 59Bootstrap自带图表和fontawesome图标导航和导航条 Bootstrap常用插件 sweetalert插件介绍...

day 59Bootstrap自带图表和fontawesome图标导航和导航条 Bootstrap常用插件 sweetalert插件介绍...相关推荐