bootstrap图标本地引入
2019-03-18 14:12:26 qq_37514822 阅读数 273

在这里插入图片描述

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<html>
<head>
    <title>The Blog Of WuHui</title>
    <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img src="static/img/test1.jpg" style="width: 35px;height: 35px">
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">Blog</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span class="glyphicon glyphicon-book"></span>Java知识</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
</body>
<script src="static/js/jquery-3.3.1.min.js"></script>
<script src="static/bootstrap/js/bootstrap.min.js"></script>
<script>

</script>
</html>

  • 注意
  • link标签的href属性指定css文件,rel指定文件关系类型
  • jquery.min.js要先于bootstrap.min.js
  • 引入font是为了使用字体图标
2019-07-24 16:12:51 qq_42779701 阅读数 20

一、下载Bootstrap.rar

    需要自取:链接:https://pan.baidu.com/s/1d1J2SgFJq6tWTsIrsTi8sQ 
    提取码:kd1l 
    
    下载后并解压,有两个文件夹css和js

二、导入
    
    将解压后的css和js放在html同目录下
    
    因为Bootstrap是建立在JQuery基础上的,所以需要导入jquery.min.js
    在html进行导入,导入顺序:
    1、JQuery
    2、Bootstrap css(定义了各种样式,如字体图标等)
    3、Bootstrap js(产生交互效果,如关闭警告框)
    
    

<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

 

三、简单使用
    
    </br>
        <button class="btn btn-info">按钮</button>
     

 效果:

 


        

2019-03-17 09:19:00 weixin_34029949 阅读数 3

内容
参数
  OS   Windows 10 x64
  browser   Firefox 65.0.2
  framework     Bootstrap 3.3.7
  editor   Visual Studio Code 1.32.1  
  typesetting   Markdown

本地的文件目录结构

940935-20190317091807153-669153183.png

940935-20190317091811124-1724928420.png

940935-20190317091814686-302388111.png

940935-20190317091818613-1362085683.png

940935-20190317091855446-2026413584.png

code

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <!-- IE将使用最新的引擎渲染网页 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 页面的宽度与设备屏幕的宽度一致
         初始缩放比例 1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Demo</title>

    <!-- 引入外部bootstrap的css文件(压缩版),版本是3.3.7 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body>



    <!-- NO.1 加载框架依赖的jQuery文件(压缩版),版本是1.12.4 -->
    <script src="bootstrap/js/jquery.min.js"></script>
    <!-- NO.2 加载Bootstrap的所有JS插件,版本是3.3.7 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

resource

  • [ 文档 ] getbootstrap.com/docs/3.3
  • [ 源码 ] github.com/twbs/bootstrap
  • [ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
  • [ 平台 ] www.cnblogs.com
  • [ 平台 ] github.com
  • [ 扩展 - 平台] www.bootcss.com
  • [ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer


Bootstrap是前端开源框架,优秀,值得学习。
博文讲述的是V3版本,更为先进的是V4版本。学有余力的话,可作简单地了解。
Firefox是开源的浏览器,优秀,值得关注。
面对开源框架,分析、领悟与应用,能对其进行加减裁化,随心所欲而不逾矩。
博文的质量普通,仅供参考。盲目复制,处处是坑。Think twice before you act(三思而后行)!

转载于:https://www.cnblogs.com/kemingli/p/10545636.html

2019-03-17 09:19:00 weixin_33860147 阅读数 7

内容
参数
  OS   Windows 10 x64
  browser   Firefox 65.0.2
  framework     Bootstrap 3.3.7
  editor   Visual Studio Code 1.32.1  
  typesetting   Markdown

本地的文件目录结构

940935-20190317091807153-669153183.png

940935-20190317091811124-1724928420.png

940935-20190317091814686-302388111.png

940935-20190317091818613-1362085683.png

940935-20190317091855446-2026413584.png

code

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <!-- IE将使用最新的引擎渲染网页 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 页面的宽度与设备屏幕的宽度一致
         初始缩放比例 1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Demo</title>

    <!-- 引入外部bootstrap的css文件(压缩版),版本是3.3.7 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body>



    <!-- NO.1 加载框架依赖的jQuery文件(压缩版),版本是1.12.4 -->
    <script src="bootstrap/js/jquery.min.js"></script>
    <!-- NO.2 加载Bootstrap的所有JS插件,版本是3.3.7 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

resource

  • [ 文档 ] getbootstrap.com/docs/3.3
  • [ 源码 ] github.com/twbs/bootstrap
  • [ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
  • [ 平台 ] www.cnblogs.com
  • [ 平台 ] github.com
  • [ 扩展 - 平台] www.bootcss.com
  • [ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer


Bootstrap是前端开源框架,优秀,值得学习。
博文讲述的是V3版本,更为先进的是V4版本。学有余力的话,可作简单地了解。
Firefox是开源的浏览器,优秀,值得关注。
面对开源框架,分析、领悟与应用,能对其进行加减裁化,随心所欲而不逾矩。
博文的质量普通,仅供参考。盲目复制,处处是坑。Think twice before you act(三思而后行)!

转载于:https://www.cnblogs.com/kemingli/p/10545636.html

2018-03-10 17:51:55 skyejy 阅读数 1835

除了glyphicons 还可以如下方式引入图标:

http://www.bootcss.com/p/buttons/

Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库。

BUTTONS SETUP

复制
  1. <!-- Buttons 库的核心文件 -->
  2. <link rel="stylesheet" href="css/buttons.css">
  3.  
  4. <!-- 当需要使用带下拉菜单的按钮时才需要加载下面的 JavaScript 文件 -->
  5. <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  6. <script type="text/javascript" src="js/buttons.js"></script>
  7.  
  8. <!-- 只有使用字体图标时才需要加载 Font-Awesome -->
  9. <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

一段可实现的代码案例:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
   

    <title>welcome to jitapuzi</title>
	
 <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
	
 <link href="css/buttons.css" rel="stylesheet">
         <!--有这两个link才可以正确显示图标-->
	
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <link href="css/sticky-footer-navbar.css" rel="stylesheet">
  </head>


  <body>
 
  <main role="main" class="container">
  <button class="button button-square button-tiny"><i class="fa fa-plus"></i></button>
  <button class="button button-box button-tiny"><i class="fa fa-plus"></i></button>
  <button class="button button-circle button-tiny"><i class="fa fa-plus"></i></button>
  <button class="button button-primary button-square button-small"><i class="fa fa-plus"></i></button>
  <button class="button button-primary button-box button-small"><i class="fa fa-plus"></i></button>
  <button class="button button-primary button-circle button-small"><i class="fa fa-plus"></i></button>
  <a href="http://www.bootcss.com/" class="button button-action">Go</a>
  <a href="http://www.bootcss.com/" class="button button-action button-rounded">Go</a>
  <a href="http://www.bootcss.com/" class="button button-action button-pill">Go</a>
	 
	
  </main>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="../../../../assets/js/vendor/popper.min.js"></script>
    <script src="../../../../dist/js/bootstrap.min.js"></script>
  </body>
</html>

①bootstrap引入

阅读数 8

引入bootstrap

阅读数 2

bootstrap引入

阅读数 7

引入bootStrap

阅读数 311

没有更多推荐了,返回首页