web 本地引入bootstrap_web项目中怎么引入bootstrap插件 - CSDN
精华内容
参与话题
  • 在HTML网页中引入Bootstrap前端框架

    万次阅读 2018-06-30 15:09:02
    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由

           Bootstrap百度百科介绍:

          Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。

        这是优雅的分割线....................................

        要想在HTML网页中试用Bootstrap,至少需要引入三个文件

        <!-- 新 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

       然后将所有使用Bootsrap样式的代码写在如下DIV中,二者选一。

       <div class="container">
        //这里写你bootstrap样式的代码
        </div>

        <div class="container-fluid">
        //这里写你bootstrap样式的代码
        </div>

      

       以下是本人编写的一个例子网页代码

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    	<title>首页</title>
    	<!-- 设置文档编码 -->
    	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    	<!--  -->
    	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    	<!-- 新 Bootstrap 核心 CSS 文件 -->
    	<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    	<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    	<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    	<!-- CSS样式 -->
    	<style type="text/css">
    		.container div{
    			text-align:center;
    		}
    	</style>
    </head>
    <body>
    	<div class="container">
    		<div ><h4>请选择你要进行的操作</h4></div>
    		<br/>
    		<div ><button type="button" class="btn btn-primary btn-lg btn-block active" οnclick="location=''" >我要出租汽车</button></div>
    		<br/>
    		<div ><button type="button" class="btn btn-primary btn-lg btn-block" disabled="disabled" οnclick="location=''">我要租赁汽车</button></div>
    	</div>
    </body>
    </html>
    
      注:

    引入文件时,我是在线引入,为了方便不联网的情况,我们可以先将这三个文件下载下来,然后在引入本地路径的CSS文件和JS文件。至于如何获得这三个文件,麻烦点的可以去Bootstrap的官网http://v3.bootcss.com/和JQuery

    的官网http://jquery.com/下载相应的文件下来,这样可以加深对Bootsrtap的了解;最简单的就是直接访问这三个网页

    http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css
    
    http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js
    http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js
    将网页内容直接保存下来,文件名跟网页名称一致。


    展开全文
  • springboot+thymeleaf引入bootstrap和jqurey

    千次阅读 2018-04-09 16:50:04
    后台采用的是springboot框架,模板引擎用的是thymeleafweb资源目录如图所示:1.在static下面放置下载的bootstrap和jquery文件2.在templates中放置显示的动态html页面3.接下来是核心,也即是...例如:引入bootstrap....

    后台采用的是springboot框架,模板引擎用的是thymeleaf

    web资源目录如图所示:


    1.在static下面放置下载的bootstrap和jquery文件

    2.在templates中放置显示的动态html页面

    3.接下来是核心,也即是如何在templates中下面的html文件中引入上面的静态资源的方式

    一定要按照thymeleaf的格式,即用@{路径}这种形式

    4.例如:引入bootstrap.css


    引入JQuery和bootstrap的其他文件



    5.如此,可正常使用bootstrap和jquery插件

    展开全文
  • 先在项目中创建webapp文件夹,...页面和bootstrap文件夹不在同级别就需要让其进入到同级别,利用“../”来实现,如下面的WEB-INF下面的页面利用“../”就让其到WEB-INF级别就和bootstrap同级别了。 ...

     

    先在项目中创建webapp文件夹,然后把bootstrap导入到项目中,页面和bootstrap文件夹在同级别就直接按下来的写

     

    导入文件

     

    页面和bootstrap文件夹不在同级别就需要让其进入到同级别,利用“../”来实现,如下面的WEB-INF下面的页面利用“../”就让其到WEB-INF级别就和bootstrap同级别了。

    122

     

     

     

     

     

     

     

    展开全文
  • 你在使用bootstrap字体图标的时候,是否遇到引用本地Bootstrap文件无法显示字体图标,而使用CDN服务器上bootstrap却能正常显示的问题。 在不能正常显示的时候,比如我要在一个按钮中使用一个√的字体图标,我的代码...

    你在使用bootstrap字体图标的时候,是否遇到引用本地Bootstrap文件无法显示字体图标,而使用CDN服务器上bootstrap却能正常显示的问题。

    在不能正常显示的时候,比如我要在一个按钮中使用一个√的字体图标,我的代码是这样子的:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>bootstrap字体图标</title>
        <link rel="stylesheet" href="../libs/bootstrap.css">
    </head>
    <body>
        <div class="container">
            <button class="btn"> <span class="glyphicon glyphicon-ok"></span></button>
        </div>
    </body>
    </html>
    但是他的显示却是这个样子的:

    网上查找了很多解决办法,说法不一。下面来看看我是如何解决的。

    发现不能显示之后我使用了goole cdn上的地址引入bootstrap文件,发现可以正常显示。所以问题应该出现在引入文件这里。

    ctrl+左键进入glyphyicon,发现实现的代码是这样的:

    @font-face {
      font-family: 'Glyphicons Halflings';
    
      src: url('../fonts/glyphicons-halflings-regular.eot');
      src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
    }
    .glyphicon {
      position: relative;
      top: 1px;
      display: inline-block;
      font-family: 'Glyphicons Halflings';
      font-style: normal;
      font-weight: normal;
      line-height: 1;
    
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    在idea中就会发现@font-face这部分报红,提示can not resolve file glyphicons-halflings-regular.eot和glyphicons-halflings-regular.eot,意思是找不到文件。

    所以glyphyicon这个样式,是关联着这些文件的,进入到下载的整个的压缩包,进入这个文件bootstrap-3.3.7-dist\fonts,就会发现如下文件:

    ,所以glyphyicon这个样式,必须要关联到glyphicons-halflings-regular.eot等文件才能正常使用。

    而在我的引用bootstrap文件中,我是这样引用的,可能你也正在犯跟我一样的错误:

    <link rel="stylesheet" href="../libs/bootstrap.css">
    在webstrom中看到我的libs目录是这样的:

    是的,在使用bootstrap的大多样式的时候,单单是bootstrap.css这个文件就够了,不必引入全部的,这样可以让我们的项目没那么臃肿。但是在我们使用字体图标的时候,是需要关联到字体图标相关的文件才得以实现的,所以当我引入整个bootstrap-3.3.7(您也可以部分引入,只要将你想要的功能的相关文件全部引入且目录无误即可),然后再在我的html中这样引入:

    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
    
    这样就能够正常显示字体图标:


    总结:分析了那么多,意思就是字体图标这个样式的实现,需要关联到glyphyicon相关文件,你在引入bootstrap.css文件时,你要确保在与bootstrap.css的相对路径下,能够让他找到这些关联文件,而CDN服务器上的正式如此,如此才能让图标正常显示。

    展开全文
  • 【前言】在项目里用了Bootstrap框架,第一次写前端,发现不知道如何引用样式。 首先样式文件css js fonts放在什么地方? 按照现在的常用做饭,css放在WebContent目录下,而不能放在WEB-INF目录下 其次,如何引用...
  • Bootstrap(引入)环境安装

    千次阅读 2015-12-29 10:00:51
    首先你应该知道Bootstrap是一个前端框架,Bootstrap 让前端开发更快速、简单,简单的来说就是更加方便的布局web页面,不用开发者在一个一个块的...一,下载bootStrap到本地,从本地引入, 二,利用免费的CDN,你可以用B
  • 怎样在jsp中引入bootstrap样式

    千次阅读 2018-12-21 18:55:32
    1、先在WEB-INF中新建一个文件夹,然后在添加css,fonts,js三个文件,如下图: 2、引入bootstrap样式相当于css样式样,在外部调用所需要的样式,在jsp页面中加入这几行代码即可调用到bootstrap样式, 如下图: ...
  • Bootstrap简单引用

    千次阅读 2020-07-01 08:49:53
    基于html,css,javaScript的前端开发框架,简洁灵活,使得web开发更为方便 下载 https://www.bootcss.com/ 使用 1、引用文件包 将这三个文件复制到项目中 2、创建html文件,引入...
  • Web前端框架学习—Bootstrap

    万次阅读 多人点赞 2017-11-15 09:34:37
    Bootstrap是一个非常好的前端框架,在前端时间的小项目中需要使用Bootstrap做前端,于是就学习了一下,觉得非常好用,推荐给新手。 一、 什么是BootstrapBootstrap,来自 Twitter,是目前最受欢迎的前端框架。...
  • 对于数据的显示一般都是通过table表格来显示,所以管理系统的开发很有必要引入表格插件,对于sencha touch等商业化框架,都有自己自带的表格控件,而对于bootstrap需要引入第三方的表格插件,这里我学习下bootstrap ...
  • bootstrapTable跨域问题

    千次阅读 2016-06-23 19:14:37
    前端使用bootstrapTable,本地开发时,由于项目是html+js,直接在谷歌浏览器中访问html页面,查看页面效果,前端页面是file:///d:/xx/xx.html,后台接口地址是localhost:8080/xx/xx,这就涉及到跨域问题。...
  • Failed to load resource: the server responded with a status of 404 (Not Found) 错误指向 ../fonts/...VS2013使用Bootstrap引入本地Bootstrap文件老是报错! 可能的原因有二: 1. 看是引用的还是。
  • 基于Bootstrap3制作响应式布局网站(一)

    万次阅读 多人点赞 2015-05-17 19:57:56
    现在的上网设备十分多,每种设备的分辨率都不一样,传统的网站开发需要花很大功夫才能实现不同分辨率下兼容布局,而Bootstrap的出现使得网站开发更加简单快捷。Bootstrap是Twitter推出的一个用于前端开发的开源工具...
  • Flask-Bootstrap使用本地CSS和JS

    千次阅读 2018-07-12 10:04:45
    在离线环境下使用flask-bootstrap开发web界面时发现无法加载css和js,查看页面源代码发现是使用的在线cdn: &lt;!-- Bootstrap --&gt; &lt;link href="//cdnjs.cloudflare....
  • 引入bootstrap,设置静态资源

    千次阅读 2014-10-27 19:34:33
    Django实战(5): ... 之前生成了Product类的scaffold,但是如同rails的开发者David所讲的那样,scaffold几乎没什么用。所以按照《Agile ... Web Development with Rails 4th》中的迭代计
  • 在jsp引入bootstrap

    千次阅读 2018-12-19 16:03:53
    第一步:在...第三步:新建Maven工程然后将它转为一个动态web工程(如果不会,可以参考本人上一篇博客《将一个Maven工程转为一个标准的Web动态工程》) 第四步:在src下面新建一个文件夹(static...
  • 本文将包括以下内容: 创建一个Express应用 使用npm和package.json管理应用依赖 调整Express工程结构到MVC架构 Route和Controller概念分离 创建新的Node模块(module) 使用Git在线部署Express应用到Heroku ...
  • go语言快速入门:使用静态文件(20)

    千次阅读 2017-02-08 21:36:57
    在前面关于如何在go中使用...css和javascript可以绕过去不访问本地的静态文件,但是关于工程所需要用到静态文件时应该如何处理这个问题,在这篇文章中我们将通过使用本地BootStrap的css和javascript文件的方式来实现。
  • bootstrap基础(一):环境搭建

    千次阅读 2017-04-05 22:45:16
    bootstrap基础环境搭建
1 2 3 4 5 ... 20
收藏数 10,246
精华内容 4,098
关键字:

web 本地引入bootstrap