Bootstrap基本介绍_大大怪僵軍的博客-程序员宅基地

技术标签： java Bootstrap

Bootstrap

一、Bootstrap是什么

Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架

是一个用于快速开发Web应用程序和网站的前端框架

Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷

概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架

二、为什么要用Bootstrap

因为Bootstrap是一个简洁、直观、强悍的前端开发框架，让web开发更迅速、更容易上手。

三、如何使用Bootstrap

1.下载Bootstrap库 https://v4.bootcss.com/(Bootstrap管网)

2.页面中引入库

jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】

bootstrap.css：Bootstrap核心样式【添加到head标签中】

四，案例

查询按钮原生态实现对比Bootstrap方式实现


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>案例1：查询按钮原生态实现对比Bootstrap方式实现</title>
		<style type="text/css">
			.aa{
				background-color: #007BFF;/* 背景颜色 */
				color: white;/* 字体颜色 */
				border:0px; /* 无边框*/
				width: 60PX;/* 宽度 */
				height: 40PX;/* 高度 */
				font-size: 1.125rem;/* 字体大小 */
				border-radius: 4px;/* 设置外边框圆角 */
			}
		</style>
		<!-- 引入Bootstrap的css(层叠样式) -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<!-- 支持手机端 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
			<button class="aa">查询</button>
			<hr color="red">
			<button class="btn btn-danger">查询</button>
			<!-- 引入JQuery库 -->
			<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
			<!-- 引入Bootstrap的类库 -->
			<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

效果图：

本文链接：https://blog.csdn.net/m0_68756200/article/details/123881893

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

自定义cell——实现复杂的团购界面_cell5.3.9_Walden_tinghou的博客-程序员宅基地

1.自定义cell有时候需要自定义UITableViewCell(用一个子类继承UITableViewCell)，而且每一行用的不一定是同一种UITableViewCell，所以一个UITableView可能拥有不同类型的UITableViewCell，对象池中也会有很多不同类型的UITableViewCell，那么UITableView在重用UITableViewCell时可能会得到

透过敦煌看华为新型智慧城市建设的思与行_大数网的博客-程序员宅基地

从北京出发一路向西，约三个小时的航程后，到达此行目的地敦煌。应该说笔者也算见识过不少机场的，但这里绝对算最独特的一个，跑道边上除了黄沙还是黄沙，以致降落时还有些迟疑，一度以为飞机还在天上。没错，这是地处沙漠腹地的一座城。就是这样一座满是黄沙的城，近些年却吸引着越来越多人的脚步。援引敦煌的一组统计数据，沙鸣山月牙泉——游敦煌必去景点之一，2014年游客87万，2015年131万，2016年

python 在线网盘源码_免费视频教程！零基础学Python系列(1) python简介_weixin_39722196的博客-程序员宅基地

点击跟哥一起学Python关注我们实例源码本节频视涉及到的实例源码，可以在百度网盘中下载。在公众号对话框回复关键字“网盘地址”，获取网盘链接和提取码。课件01—写在前面我做了十几年的程序猿，码过代码、带过项目、做过产品经理、做过软件架构师。因为我是做通信设备软件的，面向底层操作系统，所以我的工作主要以C语言为主。Python在我的工作中通常用来写一些小脚本。最近一个项目的需要，我需要...

WebAPI(part11)--DOM重点核心_常用 dom api_GoatGui的博客-程序员宅基地

学习笔记，仅供参考，有错必究文章目录DOM重点创建删改查属性操作事件操作DOM重点关于DOM操作，我们主要针对于元素的操作. 主要有创建、增、删、改、查、属性操作、事件操作.创建document.writeinnerHTMLcreateElement删removeChild改主要修改dom的元素属性, dom元素的内容, 属性, 表单的值等.修改元素属性：src、href、title 等修改普通元素内容：innerHTML、innerText修改表单元素：value

【译】【PyOpenGL教程-介绍着色器】 varying变量（颜色）_pyopengl未加载模型颜色_v_xchen_v的博客-程序员宅基地

原文地址：http://pyopengl.sourceforge.net/context/tutorials/shader_2.htmlvarying变量（颜色）【译】【PyOpenGL教程-介绍着色器】 varying变量（颜色）本教程基于以往的教程之上新增了： - 使用varying变量在顶点着色器和片段着色器之间进行通信 - 捕捉着色器中的编译错误 - 将顶点和颜色值...

selenium2+python_自动化测试实例_登录&下拉框_python自动登录后点击下拉框_Adalia_hc的博客-程序员宅基地

本篇博客主要是想记录一下自己在学习过程中编写的代码，将selenium与单元测试结合实现了百度网盘的登录测试、排序下拉框的测试，并使用测试套件组织测试模块执行，将结果生成html文件。代码中使用包、模块、unitest、TestSuite、HTMLTestRunner、输出文件名带上时间戳。代码中包含一个以百度网盘为基础的两个测试用例，还有两个是在学习中单纯为了测试一些概念的毫无意义的测试用例...