响应式设计(重点): Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机; BootStrap包含内容(主要包含): 基本结构：Bootstrap 提供了一个带有网格系统、链接样式...，列表项中左对齐 ( 和 中) .list-inline: 将所有列表项放置同一行 .dl-horizontal: 该类设置了浮动和偏移，应用于 元素和 元素中，...; 官方文档描述: Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。...输入框组扩展自表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。....input-group-btn #按钮插件 把按钮作为输入框组的前缀或者后缀元素 #输入组大小 input-group-lg #改变输入框组的大小。
一.Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。 居中对齐文本 向右对齐文本 本行内容是减弱的... 这是一个带有源标题的引用。...尝试一下 .blockquote-reverse 设定引用右对齐 尝试一下 .list-unstyled 移除默认的列表样式，列表项中左对齐 ( 和 中)。...这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式) 尝试一下 .list-inline 将所有列表项放置同一行 尝试一下 .dl-horizontal 该类设置了浮动和偏移
在Bootstrap出现之前： 命名：重复、复杂、无意义（想个名字费劲） 样式：重复、冗余、不规范、不和谐 页面：错乱、不规范、不和谐 在使用Bootstrap之后： 各种命名都统一并且规范化。...--一级标题中嵌入小标题--> 一级标题小标题 文本对齐 文本左对齐 文本居中 文本右对齐 常用Bootstrap组件 字体图标 下拉菜单 按钮组 输入框俎 导航 分页 标签和徽章 页头 缩率图 进度条 模拟滚动的进度条： var $d1 = $("#d1"); var width...Bootstrap的栅格系统 container row column 注意事项： 使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。
输入框组 .input-group：只能用于文本框，不能用于和。....input-group-lg 和 .input-group-sm 可以改变输入框组的尺寸。...输入框组的应用 <span class...导航链接、表单、按钮或文本对齐。 .navbar-btn：对于不在中的元素，实现垂直对齐。...好了，然后直接上完整的源码: 完整的源码链接: https://github.com/chenhaoxiang/BootStrap/tree/master/day3 像学后台的，把这个BootStrap
实际上，Google 官方的应用也有不遵照规范的地方，不能太拘泥于条条框框。...，防止它挡住列表项 悬浮按钮的位置不能随意摆放，可以贴着左右两边的对齐基线 编辑 悬浮按钮有两种尺寸：56x56dp/40x40dp ** 卡片（Cards） ** 编辑 卡片是包含一组特定数据集的纸片...编辑 存在浮动按钮时，小标题要让出位置，与文字对齐。 编辑 选择控制（Selection controls） 编辑 开关允许用户选择选择项。...编辑 文本字段（Text fields） 编辑 文本框可以让用户输入文本。它们可以是单行的，带或不带滚动条，也可以是多行的，并且带有一个图标。点击文本框后显示光标，并自动显示键盘。...编辑 同时有多个输入框错误时，顶部要有一个全局的错误提示 编辑 输入框尽量带有自动补全功能。
整体结构 首先介绍一下栅格系统的工作原理 一行数据必须包含在一个.container中，一遍为其赋予合适的对齐方式和内边距padding。...使用行在水平方向上创建一组列 具体内容放在列中，只有列可以作为行的直接子元素 接下来看一下.container样式的源码，可以看出其核心就是.container和@media的设置 .container...，也就是改变左右浮动，并设置浮动的距离，其通过.col-md-push-*和.col-md-pull-*实现。...系统为了方便，统一在左浮动的基础上，通过设置left和right的值来实现定位显示。...常用js插件 在之前CSS的基础上，BootStrap自带12种jQuery插件，其利用bootstrap数据API，大部分插件可以在不编写任何代码的情况下触发。
flex-*-grow-0 不同的荧幕设备不设置扩展 flex-*-grow-1 不同的荧幕设备设置扩展 flex-*-shrink-0 不同的荧幕设备不设置收缩 flex-*-shrink-1 不同的荧幕设备设置收缩...flex-*-nowrap 不同的荧幕设备不设置包裹元素 flex-*-nowrap 不同的荧幕设备不设置包裹元素 flex-*-wrap 不同的荧幕设备设置包裹元素 flex-*-wrap-reverse...类来创建垂直的按钮组 进度条(Progress) 创建一个基本的进度条的步骤 添加一个带有 .progress 类的 接着，在上面的 内，添加一个带有 class .progress-bar...输入框组(Input-group) 例： ...float-left 设置元素左浮动 clearfix 用于清除浮动 mx-auto 设置居中对齐 my-auto 上下margin m-* .p-* 四周margin/padding w-* (.w
本章将讨论 Bootstrap 中的一些可能会派上用场的辅助类。 文本 以下不同的类展示了不同的文本颜色。...使用带有 class caret 的 元素得到该功能。...实例 向左快速浮动 向右快速浮动 结果如下所示： 如需对齐导航栏中的组件...请查看 Bootstrap 导航栏。 内容居中 使用 class center-block 来居中元素。...label 标签都带有 class sr-only，因此标签将只对屏幕阅读器可见。
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。...使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。 ---- 标题 Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。...">向右对齐文本 本行内容是减弱的 本行内容带有一个 primary class 这是一个带有源标题的引用。...这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式) 尝试一下 .list-inline 将所有列表项放置同一行 尝试一下 .dl-horizontal 该类设置了浮动和偏移
简介 在设计文档时，我们经常需要修改浮动体标题的字体、间距、对齐方式等格式，然而 LaTeX 内核及标准文档并没有提供直接修改浮动标题格式的命令，这时就可以使用 caption 宏包来完成相关的设置。...选项 justification 选项设置浮动标题的对齐方式： 格式 对应段落命令 对齐方式 justified \justifying 普通段落的均匀对齐（默认值） centering \centering...\caption： \captionof{figure}{空图片标题} \captionof 和 \caption 一样，都有一个带星号的形式，表示不编号、不显示标签也不进入图表目录的标题： \captionsetup...需要注意的是，subcaption 宏包依赖于 caption 宏包。subcaption 宏包提供了一组命令来完成子图表的排版输出。 \subcaption{}：用来直接输出子标题。...\subcaptionbox[]{}[][]{}：生成一个带有子标题的子图表。
在Bootstrap出现之前： 命名：重复、复杂、无意义（想个名字费劲） 样式：重复、冗余、不规范、不和谐 页面：错乱、不规范、不和谐 在使用Bootstrap之后： 各种命名都统一并且规范化。...Bootstrap 包的内容 起步(基本结构)：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。...通过“行（row）”在水平方向创建一组“列（column）”。 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。...--一级标题中嵌入小标题--> 一级标题小标题 文本对齐 文本左对齐 文本居中 文本右对齐<
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的一套前端工具包。...在Bootstrap出现之前： 命名：重复、复杂、无意义（想个名字费劲） 样式：重复、冗余、不规范、不和谐 页面：错乱、不规范、不和谐 在使用Bootstrap之后： 各种命名都统一并且规范化。...Bootstrap下载 官方地址：https://getbootstrap.com 中文地址：http://www.bootcss.com/ 我们使用V3版本的Bootstrap，我们下载的是用于生产环境的...我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。...--文本对齐--> 文本左对齐 文本居中 文本右对齐<
如上图所以，要把里面的小黄人分为2组，最快的方法怎办？ 很多， 比如 一只眼睛的一组，剩下的一组 选择器干啥的？...浮动只有左右浮动。 1. 浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。...2.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。 3. 元素添加浮动后，元素会具有行内块元素的特性。...右下角可以拖拽： 右下角不可以拖拽： vertical-align 垂直对齐 以前我们讲过让带有宽度的块级元素居中对齐...垂直对齐结束位置 底对齐 5、flex-wrap控制是否换行 当我们子盒子内容宽度多于父盒子的时候如何处理 值 描述 nowrap 默认值。规定灵活的项目不拆行或不拆列。
Bootstrap 标签和样式 Bootstrap 中把一些标签的样式重置了，也即是为一些标签设置了带有 Bootstrap 风格的样式，如 h 标签，p 标签等等，这其中包含了 HTML5 标签。...表格 Bootstrap 也重置了表格这个标签，加入了表格常用的样式，比如隔行换色，加边框等，下面是 Bootstrap 的表格类名，它们可以组合使用。...让label里的文字水平垂直居中对齐 示例代码如下： <form action="#" class="form-horizontal...pull-left 左<em>浮动</em> pull-right 右<em>浮动</em> 注意，直接将<em>浮动</em><em>的</em>部分放在row中，是可以撑开容器<em>的</em>，因为row是带清楚<em>浮动</em>样式<em>的</em>，如果不放直接放在row中可以在<em>浮动</em>部分外面加上clearfix...<em>的</em>类名清楚内部<em>的</em><em>浮动</em>。
.btn-group-sm : 小号按钮组 .btn-group-xs : 超小号按钮组 4、两端对齐的按钮组 ???...5、垂直显示的按钮组 ???...(链接列表) 导航条中的导航依赖于 .nav .navbar-nav 即可 3、导航条中的表单 导航条中的表不适用于bootstrap提供的表单类...需要为 navbar 中的 增加 class :.navbar-form 注意： navbar-form 默认是没有浮动的，需要自己手动指定浮动效果...5、导航条中的文本 文本需要增加 .navbar-text 来处理文本在导航条中的位置 6、导航条中的浮动方式 通过 navbar-left 实现元素左浮动
四、Bootstrap框架 1、Bootstrap简介 官方网站 Bootstrap中文网 它是由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架...其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。... text-xx类：设置文字的对齐方式。...text-center 文本居中 text-left 文本左对齐 text-right 文本右对齐 pull-xx类：设置浮动。...pull-left 左浮动类 pull-right 右浮动类 center-block类：让一个固定宽度的元素居中。
表单 标签 描述 定义供用户输入的表单 定义输入域 定义文本域 (一个多行的输入控件) 定义了 元素的标签，一般为输入标题... 定义了一组相关的表单元素，并使用外框包含起来 定义了 元素的标题 定义了下拉选项列表 定义选项组... 定义下拉列表中的选项 定义一个点击按钮 用法 标签为 input 元素定义标注（标记）。...p~ul 后续兄弟 选择p元素之后的每一个ul元素 [attribute] [target] 属性 选择所有带有target属性元素 2 [attribute=value] [target=-blank...前端框架 bootstrap adminLTE easyui layUI 五. 前后端交互 常用的模板引擎 thymeleaf freemark
按钮组的嵌套，在一个 btn-group 中嵌套另一个 btn-group (5). 两端对齐按钮组，.btn-group .btn-group-justified (6)....向 nav 元素中添加 div.navbar-header，内部允许包含 class 带有 .navbar-brand 元素 ③....导航条中的表单，不适用 bootstrap 中默认 class，使用的时 .navbar-form (具备垂直对齐效果)，配合 .navbar-left / .navbar-right 语法: <form...组件的对齐方式，允许通过 .navbar-left 实现左浮， .navbar-right 实现右浮动 (6). 导航栏的固定，不会随着滚动条发生滚动，一直在可视化区域中 ①....将自定义的css文件后辍名改为less,在此文件开头输入:@import "../less/bootstrap.less"; 系统会生成新的css文件 (4).
不过大多数情况是不推荐这样做的。 组织你的文章 \documentclass[UTF8]{ctexart} \title{你好，world!}...对齐(需要对齐的公式，可以使用 aligned 次环境来实现，它必须包含在数学环境之内) 公式组 无需对齐的公式组可以使用 gather 环境，需要对齐的公式组可以使用 align 环境。...他们都带有编号，如果不需要编号可以使用带星花的版本。...，这几个字母分别代表 here, top, bottom, float page，也就是就这里、页顶、页尾、浮动页（专门放浮动体的单独页面或分栏）。...不同于 CJK 等方式使用 TeX 和 pdfTeX 这两个不直接支持 Unicode 字符的引擎，XeTeX 引擎直接支持 Unicode 字符。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
