web 项目中bootstrap_再web项目中导入bootstrap - CSDN
精华内容
参与话题
  • Web、Maven项目中加入Bootstrap

    千次阅读 2018-11-17 09:31:06
    Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。  我也很喜欢用Bootstrap,因为Bootstrap的文件是...

           Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。

           我也很喜欢用Bootstrap,因为Bootstrap的文件是别人写的,所以我们根本不知道文件里用了什么样式和属性,所以它在学习文档上有相关的一些教程,更容易的上手和方便很多的开发者,下面会看到,但是Bootstrap文件直接导入,直接使用,也不用我们自己来写css,还有很多我没说清楚,因为我也是刚学Bootstrap不是很久。所以我能帮助的就是如何去Bootstrap的官方去下载正确的文档。

    第一步:百度搜索Bootstrap,点击Bootstrap中文网

     第二步:进去后是这个页面,点击Bootstrap中文文档

    第三步:点击进去后又进去这个页面,点击下载Bootstrap

     第四步:我们终于来到了我们要找的地方了,就是这个头部有起步的这个页面。

     

     第五步:点击下载

     第六步:下载完成后是这个目录

     第七步:这个时候呢,我们找到我们想要的了,接下就可以导入了,导入很简单,直接复制文件,看下图,这里是Maven项目,web也可以。

    是不是很方便,直接把整个文件Ctrl+C 和Ctrl+V就可以了。

    好了,导入我们也做完了,接下来就看看这个帮助文档里面有什么东西。

    1.往下拉,就会看到这个,也就是我红框选中的地方,

    我们把这段复制到jsp里面。是不是很简单。

    2.写一个按钮,如下步骤:

     点击全局css样式后,看到右边的这些样式选择有没有,对,比如我们要写一个button,就点击按钮,要做表单,就点击表单,都有相应的教程文档。这些都是很好的,往下拉,一个一个点,都是有很多学习的干货的。

    比如往下拉,都有对应的按钮,有默认的、首选的、成功的、链接、或者危险的都有,直接样式复制,多方便:

    好了,都是Bootstrap的一些教程,自己去看吧。

     

     

    展开全文
  • 细说BootStrap

    万人学习 2019-07-19 16:11:26
    本课程工34节内容,详细讲述了BootStrap的样式、组件和JavaScript组件。
  • 引入Bootstrap方法

    万次阅读 2017-01-16 14:17:41
    如果你是一名web前端开发工程师或者网页设计师,那么肯定对Bootstrap这个框架早有耳闻,甚至一些web后端工程师也会常常借助Bootstrap的力量来构筑自己心目理想的web应用。 而在去年年底推出的Bootstrap3更是追随...

    如果你是一名web前端开发工程师或者网页设计师,那么肯定对Bootstrap这个框架早有耳闻,甚至一些web后端工程师也会常常借助Bootstrap的力量来构筑自己心目中理想的web应用。
    而在去年年底推出的Bootstrap3更是追随了响应式布局扁平化设计的web开发与设计潮流,让我们感受到了它所带来的无穷魅力。
    我们会通过接下来一系列的Bootstrap教程,让Bootstrap初学者们一步步掌握Bootstrap的使用方式,在本次教程中,我们将会讲解,如何在你的项目中引入Bootstrap方法,当然,为了与国际接轨,我们还是以Bootstrap3为例,一步步展开。

    官网下载压缩包

    完整压缩包可以到Bootstrap官网下载,或者直接到我们的文章结尾处下载,下载解压缩以后我们会获得如下的文件目录:
    bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        └── glyphicons-halflings-regular.woff
    从这个目录结构我们可以看到css、js文件以及fonts文件都已经包含进来了,将这个文件目录放入你的项目ui文件夹下。

    在HTML文件中引入

    为了符合搜索引擎优化规则,我们引入最核心的压缩文件即可,其中包括bootstrap.min.css、bootstrap-theme.min.css以及bootstrap.min.js。

    bootstrap.min.css文件中涵盖了所有Bootstrap的核心样式,包括按钮、导航栏、布局等等元素。

    bootstrap-theme.min.css文件包含所有Bootstrap2的样式,如果你想在Bootstrap3的框架中使用Bootstra2的样式,那么就可以将该文件在bootstrap.min.css之后引入,从而覆盖前者的扁平化样式。

    bootstrap.min.js文件中包含了所有Bootstrap3中的js交互以及逻辑代码,必须引入。

    所以我们可以在项目的公用头文件模块调用如下代码:<!-- 引入已经压缩的css文件 --><linkrel="stylesheet"href=“/ui/css/bootstrap.min.css"><!-- 如果你想采用Bootstrap2的样式,那么引入该压缩css文件 --><linkrel="stylesheet"href=“/ui/css/bootstrap-theme.min.css"><!-- 引入已经压缩的js文件 --><script src=“/ui/js/bootstrap.min.js"></script>在这之后就可以在你的项目中调用对应的Bootstrap样式以及JS模块了。

    注意点补充

    值得注意的是,如果你先前使用过Bootstrap2,就会发现Bootstrap3的压缩包里缺少了bootstrap-responsive.css文件以及增加了bootstrap-theme.min.cs文件。
    后者的作用我们在之前已经解释了,前者是在Bootstrap2中起到一个实现响应式技术的作用,而在Bootstrap3中,将其整合到了Bootstrap.min.css文件中,减小文件数量与其大小,这正是网站优化非常重要的一点。
    这篇引入Bootstrap方法入门教程先写到这,之后我们会陆续推出一系列Bootstrap教程文章,有兴趣的朋友可以持续关注我们。

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

     

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

     

    导入文件

     

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

    122

     

     

     

     

     

     

     

    展开全文
  • 使用 Bootstrap 4 提升网页实战教程

    万人学习 2018-11-05 12:02:07
    使用Bootstrap 4提升网页实战视频课程,课程内容包含使用bootstrap开发购物网、Landing page、个人网站、企业网站、客制化网站都将难不倒您!这堂课会手把手地透过Bootstrap 4 实作各种业界案例,有了这样的加持,...
  • 如题,在使用idea的gradle开发一个jfinal项目时,引入了css以及js。但是不能显示出来。路径填写的是相对路径。 ![图片说明](https://img-ask.csdn.net/upload/201612/09/1481255047_514632.png) ![图片说明]...
  • bootstrap框架与javaweb项目结合/引入

    千次阅读 2018-12-21 10:48:07
    bootstrap框架是前端使用较多的前端样式框架,但是最近突然忘记框架怎么和javaweb...2、将css、js、founts这三个文件夹直接拷贝放到javaweb 项目WebRoot/WebContent文件夹下,与WEB-INF文件夹在同一级,如图 ...

    bootstrap框架是前端使用较多的前端样式框架,但是最近突然忘记框架怎么和javaweb怎么结合引入使用,故

    先做个笔记

    1、在官网上下载好bootstrap压缩包并解压,加压后包含这三个文件夹,问价中包含的文件如下:

    2、将css、js、founts这三个文件夹直接拷贝放到javaweb 项目的WebRoot/WebContent文件夹下,与WEB-INF文件夹在同一级,如图

    3、这样就把bootstrap前端样式框架与javaweb项目相结合了,下面就是在页面怎么引入并使用bootstrap框架

    因为bootstrap是依靠jQuery的,所以在上图的js文件夹中也加入了jQuery-1.9.1.js,

    在HTML中,进行如下的引入操作,注意路径地址的写法,是绝对路径还是相对路径

     

    展开全文
  • 基于bootstrap拖拽布局完成的web表单设计器

    万次阅读 热门讨论 2018-07-24 09:13:13
    本人是一名java开发程序员,前段时间公司要制作一个bpm项目项目中需要一个表单设计器,以达到设计动态表单的功能; 然后我在网上找了半天,免费开源的几乎都不适用,最后勉强找到一个bootstrap的布局样式设计器。...
  • Bootstrap的一个很漂亮的web万能模板

    万次阅读 2016-03-20 10:37:04
    Bootstrap万能模板 注意:转载请说明,来自转自itboy-木小草,尊重原创,尊重技术。 分享一个Bootstrap上的万能模板,里面有各式各样的dashboard、form、tables、editor、calendar等,只要你会ctrl + c 、ctrl + v...
  • Bootstrap结构介绍在ASP.NET MVC 项目中添加Bootstrap文件为网站创建Layout布局页使用捆绑打包和压缩来提升网站性能在Bootstrap项目中使用捆绑打包测试打包和压缩小结 作为一名Web开发者而言,如果不借助任何...
  • 简介SpringMVCSpring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构,从而在使用Spring进行WEB开发时,...
  • Bootstrap4使用垂直居中

    万次阅读 2018-08-02 17:33:40
    Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的...
  • Web前端框架学习—Bootstrap

    万次阅读 多人点赞 2017-11-15 09:34:37
    Bootstrap是一个非常好的前端框架,在前端时间的小项目中需要使用Bootstrap做前端,于是就学习了一下,觉得非常好用,推荐给新手。 一、 什么是BootstrapBootstrap,来自 Twitter,是目前最受欢迎的前端框架。...
  • Bootstrap4基础入门到精通

    千人学习 2018-10-22 21:38:17
    从Bootstrap的基础知识,如何安装,如何变通简易的调用讲起,逐步讲解Bootstrap中的CSS相关布局、布局组件如何调用;讲解Bootstrap相关的插件;同步实战代码和演练解说。
  • 很实用的50 个 Bootstrap 插件

    千次阅读 2017-10-16 16:29:04
    Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它...本文向你推荐 50 个 Bootstrap 的插件,可以考虑在你下一个项目中使用它们。 1. Bootstrap Multiselect 2. Bootstrap Dialog
  • 大白话讲解Bootstrap是什么

    千次阅读 多人点赞 2019-02-25 19:48:07
    在现代 Web 开发,有几个几乎所有的 Web 项目中都需要的组件。 Bootstrap 为您提供了所有这些基本的模块 - Grid、Typography、Tables、Forms、Buttons 和 Responsiveness。 此外,还有大量其他有用的前端组件,...
  • ①先在pom.xml  &lt;!-- https://mvnrepository.com/artifact/org.webjars/bootstrap --&gt; &lt;!-- bootstrap --&gt; &lt;dependency&gt; &lt;groupId&gt;org.webjars&...
  • 此例子来自Bootstrap官网提供的入门...引入Bootstrap创建一个web项目,采用Intellij创建web项目,详情参考:IntelliJ IDEA 14 创建Web项目在web目录下创建css目录,在css目录下创建boostrap目录,将压缩版的css文件boot
  • 最好用的web前端框架bootstrap

    千次阅读 2017-01-16 09:25:22
  • 数据库作业居然是写一个javaweb动态网站喵....一点都不会实在是愁死人...首先,新建一个Dynamic Web Project,项目结构实例如图:   可以看到项目结构如下: ————src(源码) ————WebContent ————----cs
1 2 3 4 5 ... 20
收藏数 56,534
精华内容 22,613
关键字:

web 项目中bootstrap