（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的使用
在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图标,字体图标任意放大缩小不会失 ...
随机推荐
- ID基本操作（标尺，参考线，网格）5.11
参考线:标尺参考线,分栏参考线,出血参考线.在创建参考线之前确保标尺和参考线都可见.并且选中正确的跨页和页面作为目标, “版面”“创建参考线”可以输入数值创建参考线. 跨页参考线的创建:拖动参考线时鼠 ...
- Linux内核空间内存申请函数kmalloc、kzalloc、vmalloc
我们都知道在用户空间动态申请内存用的函数是 malloc(),这个函数在各种操作系统上的使用是一致的,对应的用户空间内存释放函数是 free(). 注意:动态申请的内存使用完后必须要释放,否则会造成内 ...
- UVa 10859 - Placing Lampposts 树形DP 难度: 2
题目 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...
- jenkins部署java项目到远程linux（四）
(1)新建java项目(maven构建) pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:x ...
- sqlserver查询父子级关系
自上向下的查询方法,查询出自身以及所有的子孙数据: --自上往下搜索 ;with maco as ( union all select t.* from ty_Dictionary t,maco m ...
- Express工作原理和源码分析一：创建路由
Express是一基于Node的一个框架,用来快速创建Web服务的一个工具,为什么要使用Express呢,因为创建Web服务如果从Node开始有很多繁琐的工作要做,而Express为你解放了很多工作, ...
- SQL-29 使用join查询方式找出没有分类的电影id以及名称
题目描述 film表 字段 说明 film_id 电影id title 电影名称 description 电影描述信息 CREATE TABLE IF NOT EXISTS film ( film_i ...
- Centos7配置NFS
centos7配置nfs yum -y install nfs-utils rpcbind 设置服务开机启动: systemctl enable rpcbind systemctl enable nf ...
- Androi开发 ---Fragment片段布局案例
效果图: 1.MainActivity.java package com.example.android_activity; import android.app.Activity; import a ...
- pytest启动浏览器，失败用例截图
1.conftest.py # coding:utf- from selenium import webdriver import pytest driver = None @pytest.mark. ...