bootstrap布局

一、Bootstrap简单配置 简单使用Bootstrap，只需引入： <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/bootstrap.js" ></script> <link rel="stylesheet" href="css/bootstrap.css" /> 为什么要引入<link rel="stylesheet" href="css/bootstrap.css" />呢？举一个简单的例子： 我们利用Bootstrap，写一个简答的div： <div class="container"> <h1>Bootstrap学习</h1> <p> 以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！ 以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！ </p> </div> 通过调节浏览器窗口的大小，我们可以看到，Bootstrap是对样式为container有着响应式布局的。 二、Bootstrap栅格布局 我们在.container中定义类似table的div单元格row（行）与col（列）-md（屏幕尺寸：可以设置手机、平板等设备）-4（以12等分当前窗口，若超过12份会自动下排）..

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的一套前端工具包。 它支持响应式布局，并且在V3版本之后坚持移动设备优先。 Bootstrap是一个前端开发的框架，其实就是一堆HTML代码，有一些自带的CSS样式类（只需要记忆常用的CSS样式类） 官网链接地址： https://v3.bootcss.com/ 1-布局容器类—— container 类 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。 .container 类用于固定宽度并支持响应式布局的容器。 2-栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统提供了48个类 　设备分类 超小屏幕-手机（<768px） 小屏幕- 平板（>=768px） 中等屏幕-PC端屏幕(>=992px) 大屏幕-台式显示器（>=1200px） .container最大宽度 None （自动） 750px 970px 1170px 类前缀 .col-xs .col-sm .col-md .col-lg 所占列数

栅格布局： container ，固定宽度的容器。 container-fluid ，百分百宽度的容器。 使用行（ row ）在水平方向上创建一组列（ colmun ）。 每一行中最多能够包含 12 列，超出的列则另起一行排列 你的内容应该放置到列（ colmun ）中，只有列（ colmun ）可以作为行（ row ）的直接子元素。 列偏移： 使用col-*-offset-*类可以 将列向右偏移。 例如 ， col-xs-offset-4表示在超 小屏幕上时，将元素向右偏移 4 列 。 div class="container"> <div class="row"> <div class="col-xs-4"><div class="box">1</div></div> <div class="col-xs-4 col-xs-offset-4"><div class="box">2</div></div> </div> <div class="row"> <div class="col-xs-3 col-xs-offset-3"><div class="box">1</div></div> <div class="col-xs-3 col-xs-offset-3"><div class="box">2</div></div> </div> <div class="row">

Bootstrap框架提供了一套响应式、移动设备的流式栅格系统，该系统通过行（row）与列（column）的组合来创建页面布局。大意为把整体分为固定多少格显示。 对于移动端显示布局，需要引入一个meta标签 /* 引入移动端窗口数据标签，则user-scalable=no是设置窗口是否可缩放 */ <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no"> 开始布局内容： 首先需要创建布局容器，容器可设置类名为container和container-fluid <div class="container"> ... </div> <div class="container-fluid"> ... </div> 区别在于：container是固定宽度内容居中显示，则container-fluid是宽度100% 容器内包含“行（row）与列（column）”，关于column的类名，可实现分辨率大小的调整 <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4 col-md-5">第一列</div> <div class="col-xs-12 col-sm-4 col-md-5">第二列

css ul{ list-style: none; margin: 0; padding: 0; } a{ color: #666; text-decoration: none; } a:hover{ text-decoration: none; } body{ background: #f5f5f5; } .container{ background: #fff; } /* 因为设计稿是1280px的，而bootstrap里面的container最大为1170px，因此我们手动修改container宽度 */ @media screen and (min-width:1280px){ .container{ width: 1280px; } } /* header */ /* 如果header不设置padding-left，它本身有一个左侧内边距，因为我们需要右侧内边距,所以不能使用.row的bootstrap类样式，所以可以用这种方式 */ header{ } .logo{ background-color: #429ad9; } .logo img{ display: block; margin: 0 auto; /* width:100%; */ max-width: 100%; /* logo图片不需要缩放 */ } .logo p{ height: 50px; font

转载。 https://blog.csdn.net/Mr_JavaScript/article/details/79677503 概括 一句话概括，就是根据显示屏幕宽度的大小，自动的选用对应的类的样式。 关键字 1、col是column简写：列； 3、-* 表示占列数，即占每行row分12列栅格系统比； 4、.col-xs-* 超小屏幕如手机 （<768px）时使用； 解释 2、反推，如果我们要在移动端并排显示3个div(12/3个=每个占4 列 )，则col-xs-4；在PC端上显示6个div(12/6个=每个占2列 ) ，则 col-md-2。 实例 例一：单独使用 <div class="container"> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <!-- 说明：每row行共12列，分个3div，每个div平占4列，即3个*4列=12列 --> </div> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-8">col-md-8</div> <!-- 说明

目录 Bootstrap布局 1 概览 1.1 移动设备优先 1.2 Normalize.css 1.3 布局容器 2 栅格系统 2.1 栅格系统简介 2.2 栅格参数 2.3 栅格系统使用 2.4 不同屏幕设置不同宽度 2.5 列偏移 2.6 列位置移动 3 排版 3.1 标题 3.2 突出显示 3.3 对齐 3.4 改变大小写 3.5 引用 3.6 列表 4 代码 4.1 内联代码 4.2 用户输入 4.3 代码块 4.3 变量 4.4 程序输出 5 表格 5.1 基本 5.2 条纹状表格 5.3 带边框的表格 5.4 鼠标悬停 5.5 紧缩表格 5.6 状态类 5.7 响应式表格 6 表单 6.1 基本实例 6.2 内联表单 6.3 水平排列的表单 6.4 表单控件 7 按钮 7.1 可作为按钮使用的标签或元素 7.2 预定义样式 7.3 尺寸 7.4 激活状态 7.5 禁用状态 8 图片 8.1 响应式图片 8.2 图片形状 9 辅助类 9.1 文本颜色 9.2 背景色 9.3 三角符号 9.4 浮动 9.5 让内容块居中 9.6 清除浮动 9.7 显示或隐藏内容 9.10 图片替换 10 响应式工具 10.1 不同视口下隐藏显示 10.2 打印类 Bootstrap布局 1 概览 1.1 移动设备优先 为了确保适当的绘制和触屏缩放，需要在 <head> 之中 添加

简介 bootstrap 根据媒体查询设置不同的 container 容器宽度，在容器内用百分比设置其列 col 的宽度以自适应不同大小的屏幕，一行 row 共有 12 个 col ,只需添加相关的类名，且对应类名后面的数字之和为 12 即可。 /* 超小设备（手机，小于 768px） xs*/ /* Bootstrap 中默认情况下没有媒体查询 */ /* 小型设备（平板电脑，768px 起）sm */ @media (min-width: @screen-sm-min) { ... } /* 中型设备（台式电脑，992px 起） md */ @media (min-width: @screen-md-min) { ... } /* 大型设备（大台式电脑，1200px 起） lg */ @media (min-width: @screen-lg-min) { ... } 基本网格结构： < div class = "container" > < div class = "row" > < div class = "col-*-*" ></ div > < div class = "col-*-*" ></ div > </ div > < div class = "row" >...</ div > </ div > < div class = "container" >....

首先 使用响应式珊格布局要先在<head>里面加入<meta>标签 以响应不同宽度的设备 <meta name="viewport" content="width=device-width,intial-scale=1.0" 使用珊格系统的通用模板是 <div class ="container"> <div class = "row"> <div class = "col-md-4">...</div> <div class = "col-md-4">...</div> <div class = "col-md-4">...</div> </div> <div class = "row">...</div> </div> 其中 .container 和 .row 是固定的 珊格系统必须包括在container中 才能 居中在浏览器 然后每行包括在row中 但是每列可被替换的类就多了: col- type - size 根据设备屏幕的尺寸可以被划分成四种: >=1200px大屏幕 large (lg) >=992px 中等屏幕 middle (md) >=768px 小屏幕 small (sm) <768px 超小屏幕 extend small (xs) 其中 type 就可以被替换成 lg md sm xs Bootstrap 内置12列固定布局珊格系统 所以 size

bootstrap4.3 0) 介绍 html/css/js框架，方便创建一个响应式的，移动优先的网页 1. 无需编写大量的基础的css代码 2. 无需编写大量的基础的js代码 3. js依赖jQuery、popper（定位） css布局 css基础样式 组件（结构，样式，功能） 如果编写H5页面，并且这网页在手机中打开 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> hello world 1. 导入依赖 cdn 本地 模块化（es6） 2. 应用 .btn 布局(12栅格系统) 浮动布局/伸缩盒布局/定位布局 container 在特定的屏幕都会有一个最大的宽度，一般不会占满整个屏幕 container-fluid 在任意屏幕下都会占满整个屏幕 row 行 col 列（极小屏中的列） 实现响应式布局 col 极小 [,576px] col-sm 小 [576px,768px] col-md 中 [768px,992px] col-lg 大 [992px,1200px] col-xl 极大 [1200px,] 移动优先 只有在大屏情况下一行显示两列 border 为盒子添加边框 w-100 换行后内容重组 col-auto 内容宽度自适应 ml-auto margin-left