微信二维码
微博二维码
qq号二维码

天津JAVA培训-Springboot框架中bootstrap.css技术引入

王伟平 2020.01.16 2945人浏览
bootstrap.css技术

Bootstrap的含义:Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

第一步:搭建一个Springboot项目,在resources文件夹下static中引入bootstrap.min.css

天津JAVA培训-Springboot框架中bootstrap.css技术引入

第二步:在HTML页面中引入bootstrap.css

天津JAVA培训-Springboot框架中bootstrap.css技术引入

第三步:基于个人做的项目需要的功能点,我们可以去https://www.runoob.com/bootstrap/bootstrap-tables.html网址中加载个人的功能,例(需要一个input输入框和button按钮)

天津JAVA培训-Springboot框架中bootstrap.css技术引入

您也可以把按钮作为输入框组的前缀或者后缀元素,这个时候您就不是添加 .input-group-addon class,您需要使用 class .input-group-btn 来包裹按钮。这是必需的,因为默认的浏览器样式不会被重写。上面的实例演示了这点

第四步:我们在个人的HTML页面中粘贴以上代码,此方法只提供样式,个人还需要根据自己的功能点进行进一步更改

天津JAVA培训-Springboot框架中bootstrap.css技术引入

最终样式展示如下:

天津JAVA培训-Springboot框架中bootstrap.css技术引入

Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统.

Bootstrap可以更快捷方便的搭建好一个带有样式的项目

很实用的方法,赶紧Get起来吧!



分享到:
天津UI设计培训-CleanPNG免抠素材网站
  • 2020.11.30
  • "天津IT培训适应经济新常态:中日职场比较 - 探索工作时长减少、生活质量提升的程序员"
  • 2024.04.23