CSS之Bootstrap（快速布局）

简介

什么是Bootstrap？

Bootstrap官网

框架：库 lib library
jQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式
把大家都需要的功能预先写好到一些文件这就是一个框架
Bootstrap 让我们的 Web 开发更简单，更快捷；
注意是 Bootstrap 不是 BootStrap！这是一个词，不是合成词，其含义为：n. 引导指令,引导程序
Bootstrap 是当下最流行的前端框架（界面工具集）；
特点就是灵活简洁，代码优雅，美观大方；
其目的是为了让 Web 开发更敏捷；
是 Twitter 公司的两名前端工程师 Mark Otto 和 Jacob Thornton 在 2011 - 年发起的，并利用业余时间完成第一个版本的开发；

为什么使用Bootstarp？

生态圈火，不断地更新迭代；
提供一套美观大方地界面组件；
提供一套优雅的 HTML+CSS 编码规范；
让我们的 Web 开发更简单，更快捷；

注意：

使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式

准备

下载Bootstrap

https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zip

安装Bootstrap

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面标题</title><!-- 引入Bootstrap核心样式文件（必须） --><link rel="stylesheet" href="css/bootstrap.min.css"><!-- 引入Bootstrap默认主题样式（可选） --><link rel="stylesheet" href="css/bootstrap.theme.min.css"><!-- 你自己的样式或其他文件 --><link rel="stylesheet" href="example.css">
</head>
<body><!-- 你的HTML结构...... --><!-- 以下代码，如果不使用JS插件则不需要 --><!-- 由于Bootstrap的JS插件依赖jQuery，so 引入jQuery --><script src="js/jquery.min.js"></script><!-- 引入所有的Bootstrap的JS插件 --><script src="bootstrap.min.js"></script><!-- 你自己的脚本文件 --><script src="example.js"></script>
</body>
</html>

Bootstrap文档

官方文档
中文文档

基础的Bootstrap模板

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--></head><body><h1>Hello, world!</h1><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap.min.js"></script></body>
</html>

Compatible

<meta http-equiv="X-UA-Compatible" content="IE=edge">

此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档

视口

<meta name="viewport" content="width=device-width, initial-scale=1">

视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
视口的宽度可以通过meta标签设置
此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
- width:视口的宽度
- initial-scale：初始化缩放
- user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
- minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
- maximum-scale:最大缩放

条件注释

条件注释的作用就是当判断条件满足时，就会执行注释中的HTML代码，不满足时会当做注释忽略掉

第三方依赖

jQuery

Bootstrap框架中的所有JS组件都依赖于jQuery实现
html5shiv

让低版本浏览器可以识别HTML5的新标签，如header、footer、section等
respond

让低版本浏览器可以支持CSS媒体查询功能

建议以后在HTML中将脚步的引入放到页面最底下

mediaquery

@media (判断条件（针对于当前窗口的判断）){/*这里的代码只有当判断条件满足时才会执行*/
}@media (min-width: 768px) and (max-width: 992px) {/*这里的代码只有当(min-width: 1280px)满足时才会执行*/.container {width: 750px;}
}

当使用min-width作为判断条件一定要从小到大，其原因是CSS从上往下执行

基础CSS样式

概要
预置排版样式
- 统一预制标签样式
按钮样式
表格样式
表单样式
图片样式
辅助工具类
代码样式
栅格系统
- xs : 超小屏幕手机 (<768px)
- sm : 小屏幕平板 (≥768px)
- md : 中等屏幕桌面显示器 (≥992px)
- lg : 大屏幕大桌面显示器 (≥1200px)
响应式工具类
- hidden-xx : 在某种屏幕下隐藏
- visible-xx : 在某种屏幕尺寸下显示

预置界面组件

导航
导航条
面包屑导航
下拉菜单
按钮式下拉菜单
按钮组
输入框组
警告框
页头
分页
列表组
面板
媒体对象
进度条
Glyphicons
标签
徽章
缩略图
大屏幕
嵌入内容
内嵌

JavaScript插件

JavaScript插件的依赖情况

如何使用Javascript插件

内置组件

模态对话框
下拉菜单
滚动监听
标签页
工具提示
弹出框
警告框
按钮
折叠面板
轮播图
吸顶效果
- data-spy="affix"
- data-offset-top="什么位置出现"
- data-offset-bottom="什么位置消失"

深度自定义 Bootstrap

在线自定义

官网在线
中文网在线

源码编译

LESS语言

官方文档
中文文档

转载于:https://www.cnblogs.com/shuai1991/p/10884603.html

CSS之Bootstrap（快速布局）相关推荐

如何用CSS快速布局（一）—— 布局元素详细
要快速进行网页排版布局,则必须对布局的元素有清晰的了解,才不会总是在细节处出错.这一篇先详解有关布局的因素作为布局基础:块级元素and内联元素.盒模型.准确定位.元素对齐.样式继承.下一篇则重点描述快 ...
css响应式网格布局生成器_如何使用网格布局模块使用纯CSS创建响应表
css响应式网格布局生成器 TL; DR (TL;DR) The most popular way to display a collection of similar data is to use ...
HTML创建12列小屏幕网格,Bootstrap 网格系统布局详解
Bootstrap 提供了一套响应式.移动设备优先的流式网格系统(Grid System),随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 一.什么是网格(Grid)? 在平 ...
Bootstrap常用布局样式
Bootstrap常用布局样式 1 内容布局 1.1 标题类 1.2 文本类 1.3 列表类 2 代码和图文布局 2.1 代码样式 2.2 图文样式 3 表格布局 4 辅助样式 4.1 添加或移除边框 ...
Bootstrap快速入门（含旅游网案例）
Bootstrap快速入门 Bootstrap 更深入学习,进入Bootstrap中文网文档文档地址很多案例,现学现用 Bootstrap: 概念: 一个前端开发的框架,Bootstrap,来自 T ...
用html和css布局如下图像,HTML CSS + DIV实现整体布局
什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (ma ...
bootstrap-dist的下载和使用bootstrap可视化布局代码无样式解决
bootstrap-dist目前我自己用到的范围也就是bootstrap可视化布局后复制生成好的HTML,然后引用链接,也就这么多 1.下载官网地址点我博主下载好的文件点我(官网下载的)提取码:2 ...
bootstrap table 分页_Java入门007~springboot+freemarker+bootstrap快速实现分页功能
本节是建立在上节的基础上,上一节给大家讲了管理后台表格如何展示数据,但是当我们的数据比较多的时候我们就需要做分页处理了.这一节给大家讲解如何实现表格数据的分页显示. 准备工作 1,项目要引入freem ...
bootstrap快速入门_在5分钟内学习Bootstrap 4-快速入门指南
bootstrap快速入门了解世界上最受欢迎的前端组件库的最新版本. (Get to know the newest version of the worlds most popular front ...

CSS之Bootstrap（快速布局）

简介

什么是Bootstrap？

Bootstrap官网

为什么使用Bootstarp？

注意：

准备

下载Bootstrap

安装Bootstrap

Bootstrap文档

基础的Bootstrap模板

Compatible

视口

条件注释

第三方依赖

建议以后在HTML中将脚步的引入放到页面最底下

mediaquery

基础CSS样式

预置界面组件

JavaScript插件

JavaScript插件的依赖情况

如何使用Javascript插件

内置组件

深度自定义 Bootstrap

在线自定义

源码编译

LESS语言

CSS之Bootstrap（快速布局）相关推荐

最新文章

热门文章