Bootstrap框架_hello world 999的博客-程序员秘密
技术标签： css # Linux鸟哥的私房菜 bootstrap javascript
Bootstrap框架
目录
1.响应式开发
（1）响应式开发原理
响应式开发就是通过媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
| 设备划分 | 尺寸区间 |
|---|---|
| 超小屏幕（手机） | <= 768xp |
| 小屏设备（平板） | 768px ~ 992px |
| 中等屏幕（左面显示器） | 992px ~ 1200px |
| 宽屏设备（大桌面显示器） | >= 1200px |
（2）响应式布局容器
响应式需要一个父级容器作为布局容器，来配合子集元素来实现变化效果。
在不同屏幕下，通过媒体查询来改变这个布局容器的大小，最后改变其中的子元素的排列方式和大小，实现不同的页面布局和样式变化。
响应式尺寸划分：
| 屏幕类型 | 设置宽度 |
|---|---|
| 超小屏幕（手机，小于768px） | 设置宽度为100% |
| 小屏幕（平板，大于等于768px） | 设置宽度为750px |
| 中等屏幕（桌面显示器，大于等于992px） | 宽度设置为970px |
| 大屏幕（大桌面显示器，大于等于1200px） | 宽度设置为1170px |
2.Bootstrap文件框架
Bootstarp来自Twitter是目前最受欢迎的前端框架，基于html、css和javaScript其更为灵活，使得Web开发更加快捷。
Bootstrap使用手册：https://getbootstrap.com/
| 步骤 |
|---|
| step1：创建文件夹结构 |
| step2：创建html骨架结构 |
| step3：引入相关样式文件 |
| step4：书写页面内容 |
3.Bootstarp布局容器：
注意：Bootstrp需要为页面内容和栅格系统包裹一个.containner容器，Bootstrap预先定义好了这个类。
（1）container类：
- 响应式布局的容器（固定宽度）
- 大屏（>=1200px）宽度定为1170px
- 中屏（>=992px）宽度定为970px
- 小屏（>=768px）宽度定为750px
- 超小屏幕（100%）
（2）container-fluid类：
- 流式布局容器（百分百宽度）
- 占据全部视口（viewport）的容器
- 适合于单独做移动端开发
4.Bootstrap栅格系统
gridsystems网格系统，是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
（1）栅格系统使用：
网格系统是通过一系列的行（row）与列（column）的组合来创建页面布局的，页面内容将被放在这些创建好的布局中。
| 超小屏幕（手机<768px） | 小屏设备（平板>=768px） | 中等屏幕（>=992px） | 宽屏设备（>=1200px） | |
|---|---|---|---|---|
| .conntainer最大宽度 | 自动100% | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列（column）总数 | 12 | 12 | 12 | 12 |
注意：
- 行（row）必须放到container布局容器里面
- 要实现列的平均划分需要给列添加类前缀。
- 每一列默认有左右15像素的padding值
- 可以同时为一列指定多个设备类名，以便划分不同的份数。
<!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">
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
<title>Bootstrap</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
[class^="col"] {
border: 1px solid #ccc;
}
.container .row:nth-child(1) {
background-color: pink; col-sm-6
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
<!-- 如果孩子的份数相加等于12，则占满整个contanner -->
<div class="row">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
</div>
<!-- 如果孩子的份数相加小于12，则占不满整个contanner -->
<!-- 如果孩子的份数相加大于12，则多余的份数会另起一行 -->
</div>
</body>
</html>
（2）栅格系统列嵌套：
<!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">
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css" />
<title>列嵌套</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
[class^="col"] {
border: 1px solid #ccc;
}
.row>div {
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<!-- 注意:列嵌套最好添加一个row行，这样可以取消父元素的padding值（而且高度自动修改） -->
<div class="row">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
</div>
</body>
</html>
（3）栅格系统列偏移：
使用.col-md-offset-*类可以将列向右侧偏移，这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）。
<!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">
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected].7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css" />
<title>列嵌套</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
[class^="col"] {
border: 1px solid #ccc;
}
.row div {
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">左侧</div>
<div class="col-md-3 col-md-offset-6">右侧</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">中间盒子</div>
</div>
</div>
</body>
</html>
注意：本质上为盒子做的偏移是在盒子的左侧添加上一个margin值。
（4）栅格系统列排序：
通过使用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列（column）的顺序。
<!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">
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css" />
<title>列排序</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
[class^="col"] {
border: 1px solid #ccc;
}
.row div {
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">左侧</div>
<div class="col-md-8">右侧</div>
</div>
<div class="row">
<div class="col-md-4 col-md-push-8">左侧</div>
<div class="col-md-8 col-md-pull-4">右侧</div>
</div>
</div>
</body>
</html>
（5）栅格系统响应式工具：
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示 or 隐藏页面内容。
| 类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
|---|---|---|---|---|
| .hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
| .hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| .hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| .hidden-ld | 可见 | 可见 | 可见 | 隐藏 |
与之相反的是visible-xs、visible-sm、visible-md、visible-lg
注意：具体的Bootstrap其他（按钮、表单、表格）请参考bootstrap文档。
智能推荐
Jar混淆打包_jar包混淆_ONE_PUNCH_Ge的博客-程序员秘密
混淆工具jar包混淆工具挺多的，实现原理不尽相同，这里使用的classfinal，classfinal介绍ClassFinal是一款java class文件安全加密工具，支持直接加密jar包或war包，无需修改任何项目代码，兼容spring-framework；可避免源码泄漏或字节码被反编译。Gitee:ClassFinal: Java字节码加密工具项目模块说明classfinal-core:ClassFinal的核心模块，几乎所有加密的代码都在这里； classfinal-f..
linux启动mysql_mcxiaochi的博客-程序员秘密
启动1、使用 service 启动：service mysql start2、使用 mysqld 脚本启动：/etc/inint.d/mysql start3、使用 safe_mysqld 启动：safe_mysql&停止1、使用 service 启动：service mysql stop2、使用 mysqld 脚本启动：/etc/inint.d/mysql stop3、...
git使用教程4-pycharm拉取git仓库项目代码_pycharm从git上获取项目_上海-悠悠的博客-程序员秘密
前言当我们在github上看到别人写的项目，想拉到本地学习下。如何用pycharm把git仓库的代码拉取到本地电脑呢？环境准备：1.本地电脑已经安装了git2.已经注册过github账号3.pycharmpycharm配置先自己注册github账号，本地安装git环境，打开Pycharm-File-Settings-Version control-Git设置页面填写git在本地的地址找到你要clone的代码仓库地址: https://github.com/yoyoketang/pytes
数据挖掘之决策树算法ID3算法的相关原理_低调的洋仔的博客-程序员秘密
决策树算法ID3，理论与事例剖析
[asp.net core 源码分析] 01 - Session_weixin_30845171的博客-程序员秘密
1、Session文档介绍毋庸置疑学习.Net core最好的方法之一就是学习微软.Net core的官方文档；https://docs.microsoft.com/zh-cn/aspnet/core；.Net core Session的官方文档https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/app-state...
【一、整理-加上数据图片】MT-Unet模型的复现使用【个人记录学习】_synapse dataset_OWN CODE WORLD的博客-程序员秘密
找MT-UNet-main代码----GitHub一、复现MT-UNet思路：先复现MT-UNet-main，再用我们的数据集跑 代码中有ACDC dataset数据，但我们要跑Synapse dataset. 找dataset数据：根据作者提示去TransUnet.项目中寻找。 TransUnet作者提供了两种方法：发邮件，联系作者，要已经处理好的Synapse dataset.数据集，但是作者至今未回复，GitHub项目issues里面，其他的研究人员也未能联系到作者获取到数据集。...
随便推点
at java.util.Properties$LineReader.readLine(Unknown Source)配置文件路径错误_不语@2632959526的博客-程序员秘密
配置文件路径错误将配置文件放在src目录下 src\jdbc.properties 则代码为prop.load(JDBCUtils.class.getClassLoader().getResourceAsStream(“jdbc.properties”));//从src路径下开始将配置文件放在src目录下work文件夹中 src\work1/jdbc.properties,则代码为prop.load(JDBCUtils.class.getClassLoader().getResourceAsStr
java导出表格数据excel_爱上星期六的博客-程序员秘密
controller层public JsonResponse exportData(HttpServletResponse response, @RequestParam(name = "inventoryId", required = true) String inventoryId, @RequestParam(name = "batch", r
java.lang.ClassNotFoundException: com.sun.xml.bind.v2.ContextFactory解决_我曾来过的博客-程序员秘密
在pom文件中在 &lt;dependency&gt; &lt;groupId&gt;javax.xml.bind&lt;/groupId&gt; &lt;artifactId&gt;jaxb-api&lt;/artifactId&gt; &lt;version&gt;2.1&lt;/version&gt; &lt;/dependency&
java中的gridy_Java GridBagConstraints gridx和gridy无法正常工作？_感受我的style的博客-程序员秘密
我正在尝试使用gridx和gridy约束来定位我的按钮。但是它们不起作用！如果更改gridx和gridy变量，则什么也不会发生。如果我将填充更改GridBagConstraints为NONE，它仍然不起作用。我在这里想念什么吗？import java.awt.*;import javax.swing.*;public class Window extends JFrame{private stat...
云转码express-ffmpeg+CMS一体化系统安装教程_秋天的春的博客-程序员秘密
项目介绍实现大文件分块上传，批量上传。 实现服务器端自动动态码率转码并且切片，完成后会自动删除原视频文件。 实现批量添加水印和字幕，和同时处理。 实现截图，默认自动生成四张截图。 一键获取分享链接，设置防盗链，token防盗链或者仅允许指定域名iframe调用。 ts切片文件域名分发，负载均衡，支持无限多服务器同步分发。开源源码：https://gitee.com/quazero/...
Android-MVP模式详解，全网疯传_android pvd模式_普通网友的博客-程序员秘密
缘起随着互联网企业的不断发展，产品项目中的模块越来越多，用户体验要求也越来越高，想实现小步快跑、快速迭代的目的越来越难，还有65535，应用之间的互相调用等等问题，插件化技术应用而生。如果没有插件化技术，美团、淘宝这些集成了大量“app”的应用，可能会有几个g那么大。所以，当今的Android移动开发，不会热修复、插件化、组件化，80%以上的面试都过不了。阿里P8大佬每天熬夜到凌晨一两点，花了将近半个月时间将Android热修复框架、插件化框架、组件化框架、图片加载框架、网络访问框架、RxJava响应