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">&laquo;</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">&raquo;</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(字体图标库)的更多相关文章

  1. 在nuxt中引入Font Awesome字体图标库

    介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...

  2. jQuery插件fontIconPicker配合FontAwesome字体图标库的使用

    同样先上效果图: 怎么样,是不是很好看,jquery fontIconPicker这个插件做的很不错,支持分类,搜索,还有分页功能,可以自定义分页,具体的使用方法我就不一介绍了,我只说一下如何使用fo ...

  3. Font Awesome字体图标

    1.什么是字体图标字体图标是一个包含许多图标的字体库.可以理解为一种特殊的字体,只不过里面包含的都是图标. 2.Font Awesome图标字体库Font Awesome是目前最受欢迎最全面的图标字体 ...

  4. css3 - 字体图标库使用方法

    一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www. ...

  5. vue引入iconfont阿里字体图标库以及报错解决

    下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader)  ,记得--save ...

  6. 字体图标库 iconfont、iconmoon 的维护管理与使用探索

    字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅... 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里 ...

  7. Awesome图标 | 如何在某些编辑软件中使用Font Awesome字体图标

    文章目录 Font Awesome 字体图标 在某些编辑软件中使用 Font Awesome 字体图标 Font Awesome 为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 C ...

  8. uni-app在线引入阿里字体图标库

    第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...

  9. 字体图标库 IcoMoon IconFont Font Awesome的使用

    在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图标,字体图标任意放大缩小不会失 ...

随机推荐

  1. Mac上搭建nginx教程

    1.安装Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/in ...

  2. laravel的工厂模式数据填充：

    数据表post中的字段结构. database\factory\UserFactory.php $factory->define(App\Post::class,function (Faker ...

  3. java.lang.UnsatisfiedLinkError：no dll in java.library.path

    报错:java.lang.UnsatisfiedLinkError:no dll in java.library.path 参考: Java调用Dll时,会出现no dll in java.libra ...

  4. 红黑树( Red-Black Tree ) - 笔记

    1.  红黑树属性:根到叶子的路径中,最长路径不大于最短路径的两倍. 2. 红黑树是一个二叉搜索树,并且有 a. 每个节点除了有左.右.父节点的属性外,还有颜色属性,红色或者黑色. b. ( 根属性  ...

  5. Python返回值不同格式的取值方式

    例: { "success": true, "topic_id": "5c89021773798770589936b0"} 转换成text, ...

  6. MyEclipse使用教程：在Web项目中使用Web片段

    MyEclipse 在线订购年终抄底促销!火爆开抢>> MyEclipse最新版下载 本教程向用户展示了使用关联的Web项目创建Web片段项目的机制.用户还可以获得要检查的示例项目.在本教 ...

  7. Java进程和线程

    进程是资源分配和任务调度的基本单位, 进程就是包含上下文切换的程序执行时间总和=CPU加载上下文环境+CPU执行+CPU保存上下文环境,可以理解为时间片段: 进程的颗粒度太大了,将进程分块,按照a,c ...

  8. Ajax 以及 前端JSP页面如何查看数值

    $.ajax({ url: ctx + "/unit/rsdl/qyjy/getDljgCode", type: "post", success: functi ...

  9. synchronized(一)

    /** * 线程安全概念:当多个线程访问某一个类(对象或方法)时,这个对象始终都能表现出正确的行为,那么这个类(对象或方法)就是线程安全的. * synchronized:可以在任意对象及方法上加锁, ...

  10. 解决 java.lang.ClassNotFoundException: javax.servlet.ServletContext报错

    原因:tomcat找不到servlet,即缺少了servlet-api.jar包 解决方法: 我的项目是用maven搭建的 在pom.xml中加入依赖 <dependency> <g ...