【JavaWeb】前端框架之Bootstrap

文章目录

1 概念
2 快速入门
3 响应式布局
4 CSS样式和JS插件

1 概念

BootStrap是前端开发框架，基于HTML、CSS、JavaScript。
优点：

定义了很多CSS样式和JS插件，可以直接使用。
响应式布局：同一套页面可以兼容不同分辨率的设备。

2 快速入门

下载Bootstrap
将Bootstrap导入项目
复制粘贴模板导入样式和插件

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><script src="/js/bootstrap.js/bootstrap.min.js"></script><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/index.css" rel="stylesheet"><script src="js/jquery-3.2.1.min.js"></script><script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>

3 响应式布局

实现：

依赖于栅格系统，将一行平均分成12个格子，可以指定元素占多少格子。

步骤：

定义容器，container、container-fluid
定义行，row
定义元素，指定该元素在不同的设备上所占的各自数目。样式：col-设备代号-格子数目。设备代号：【xs超小屏幕（手机）、sm小屏幕（平板）、md中等（显示器）、lg大屏幕（大显示器）】

大屏显示效果 1×12

小屏显示效果 2×6

    <style>.inner{border: 1px solid red;}</style>
</head>
<body><div class="container-fluid"><div class="row"></div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div><div class="col-lg-1 col-sm-2 inner">栅格</div></div>
</body>
</html>

注意

container-fluid：每一种设备都是100%宽度
container：固定宽度，每种设备不一样，有留白
超过12个格子就自动换行
栅格类可以向上兼容，如果真实设备宽度小于设备栅格类属性的设备代码的最小值，则一个元素沾满一行。

4 CSS样式和JS插件

具体使用：https://v3.bootcss.com/

全局样式

按钮
表格
表单
图片

组件

导航条
分页条

插件

轮播图

【JavaWeb】前端框架之Bootstrap相关推荐

Web前端框架学习—Bootstrap
零. 写在前面 Bootstrap是一个非常好的前端框架,在前端时间的小项目中需要使用Bootstrap做前端,于是就学习了一下,觉得非常好用,推荐给新手. 一. 什么是Bootstrap? Boot ...
JavaWeb前端框架VUE和Element组件详解
文章目录前言一.前端框架--VUE 1.1 概述 1.2 快速入门 1.3 Vue 指令 1.3.1 v-bind & v-model 指令 1.3.2 v-on 指令 1.3.3 条件判 ...
前端框架之bootstrap框架基本介绍及常用UI框架
前端框架之:bootstrap框架基本使用下载地址:https://v3.bootcss.com/getting-started/ Bootstrap框架版本: 2.x 3.x 4.x // 推荐使 ...
Python 前端框架【Bootstrap】
Bootstrap Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端开发框 ...
前端框架之Bootstrap
框架概述: bootstrap是基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端开发框架,使得 Web 开发更加快捷.Bootstrap提供了优雅的HTML和CSS规范,它即是 ...
前端框架之bootstrap学习(一)
Bootstrap介绍 2011年8月,Twitter的设计师Mark Otto和Jacob Thornton发布了一个前端开发工具:Bootstrap.2012年2月,Bootstrap 2.0发布 ...
【Bootstrap】＜前端框架＞Bootstrap布局容器栅格网格系统
目录一.Bootstrap概述: 二.Bootstrap HTML模板: 三.布局容器和栅格网格系统: 1.布局容器: 2.栅格网格系统: 2.1 媒体查询: 2.2 栅格参数: 2.3 列组合: ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：让按钮看起来像个链接 (仍然保留按钮行为)...
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...

【JavaWeb】前端框架之Bootstrap

文章目录

1 概念

2 快速入门

3 响应式布局

4 CSS样式和JS插件

【JavaWeb】前端框架之Bootstrap相关推荐

最新文章

热门文章