bootstrap框架案例（bootstrap实现详情页弹窗）

本文目录

• bootstrap实现详情页弹窗
• 用bootstrap框架时的分页如何实现
• 如何使用bootstrap框架
• bootstrap4框架使用总结
• bootstrap框架怎么使用

bootstrap实现详情页弹窗

bootstrap如何实现横向布局

Bootstrap学习笔记(二) 表单

源码分析：

单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

Bootstrap框架默认的表单是垂直显示风格，在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：

效果：

在Bootstrap框架中实现内联表单,只需要在《form》元素中添加类名“form-inline”即可。

CSS之使用display:inline-block来布局

在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中。

bootstrap栅栏系统css中的col-xs- 、col-sm- 、col-md-* 的意义以及 bootstrap一个标签中，同时有 col-xs , col-sm , col-md , col-lg的理解

可以响应式的设置大小。

Bootstrap标签（label）的使用

bootstrap图标库

用bootstrap框架时的分页如何实现

bootstrap提供了分页组件，代码如下：

《nav aria-label="Page navigation"》
   《ul class="pagination"》
        《li》       
        《a href="#" aria-label="Previous"》         
        《span aria-hidden="true"》«《/span》       
        《/a》     
        《/li》     
        《li》《a href="#"》1《/a》《/li》
        《li》《a href="#"》2《/a》《/li》
        《li》《a href="#"》3《/a》《/li》
        《li》《a href="#"》4《/a》《/li》
        《li》《a href="#"》5《/a》《/li》
        《li》《a href="#" aria-label="Next"》
        《span aria-hidden="true"》»《/span》《/a》
        《/li》   
     《/ul》 
《/nav》

也可以使用基于bootstrap的分页组件bootstrap-paginator github上有

如何使用bootstrap框架

方法/步骤
到bootstrap官方网站下载，对于我们开发者来说，直接下载编译和压缩后的CSS、JavaScript文件，另外还包含字体文件，但是不包含文档和源码文件。打开解压包之后可以发现包含三个文件夹 css、fonts、js。这是最基本的Bootstrap组织形式：未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons
所有Bootstrap插件都依赖jQuery。而且在正式的项目当中我们推荐使用压缩之后的版本，因为它的体积很小，到官网下载jQuery支持，如图：
将下载后的就jQuery放到bootstrap中的js目录下，如图：
在bootstrap的根目录下新建一个demo.html文件，（注意，必须在根目录下面新建，因为后面的步骤中要将bootstrap框架中的css和js文件链接到创建的demo中）
demo.html文件，添加对bootstrap框架中css和js的引用，内容如下，图片有注释说明，这样，我们就基本上建立了对bootstrap框架的基本使用架构
源码：
《!doctype html》
《html》
《head》
《meta charset="utf-8"》
《meta name="viewport" content="width=device-width, initial-scale=1.0"》
《!-- viewport的《meta》标签，这个标签可以修改在大部分的移动设备上面的显示，为了确保适当的绘制和触屏缩放。--》
《title》无标题文档《/title》
《!--样式文件引用--》
《link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"》
《!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --》
《!-- WARNING: Respond.js doesn’t work if you view the page via file:// --》
《!--》
***隐藏网址***
***隐藏网址***
《!
IE9以下的浏览器并不支持这些标签，也不能为这些标签进行添加样式。那么修复这个问题我们需要链接引用的文件
意思就是说如果用户IE浏览器的版本小于IE9，那么就会加载这两个js文件库，现在就可以使用这些新的标签，并且可以在这些标签上添加样式了
--》
《/head》
《body》
《!--JavaScript插件都是依赖与jQuery库--》
《script type="text/javascript" src="js/jquery-2.1.3.min.js"》《/script》
《script type="text/javascript" src="js/bootstrap.min.js"》《/script》
《/body》
《/html》
另外，bootstrap官方提供了链接服务，永久免费，即使你不下载bootstrap框架文件到本地，也可以直接在html中使用，使用下面这段代码：
***隐藏网址***
***隐藏网址***
***隐藏网址***

bootstrap4框架使用总结

bootstrap 是一个开源的前端框架，主要应用于页面的布局。

官网介绍：

同时，它也是移动优先的布局框架。

移动优先，指使用bootstrap开发的页面，不仅能用于web显示，还能用于移动端显示。

使用bootstrap中规范好的CSS样式，能使页面根据屏幕大小自适应，但必须要在 head 部分加入：

可以设置的属性：

m - 设置外边距 margin
p - 设置内边距 padding

可以设置的方向：

t - 设置上 距 *-top
b - 设置下 距 *-bottom
l - 设置左 距 *-left
r - 设置右 距 *-right
x - 设置x方向的*距，即左右边距 both *-left and *-right
y - 设置y方向 both *-top and *-bottom
(none) - 空则表示设置四个方向

可以设置的大小：

0 - 设置 边距为0：for classes that eliminate the margin or padding by setting it to 0
1 - (by default) 设置 the margin or padding to $spacer * .25
2 - (by default) 设置 the margin or padding to $spacer * .5
3 - (by default) 设置 the margin or padding to $spacer
4 - (by default) 设置 the margin or padding to $spacer * 1.5
5 - (by default) 设置 the margin or padding to $spacer * 3
auto - 设置自动的 外边距 * the margin to auto

示例：

mr-3 对应 margin-right: 3 3为不定值，随屏幕大小变化。
py-2 对应 padding-top:2;padding-bottom:2;
......

d-inline-block 将块级元素转换为行内块级元素

见官网： 栅栏布局

效果如下：

offset-*

d-flex

justify-content-*

作用于div子元素。

效果依次为：

align-items-*

同样作用于div子元素。

效果依次为：

flex-fill

作用于当前元素，效果是充满父元素。

flex-grow-*

将当前元素尽可能地增长，效果如下：

flex-shrink-*

将当前元素有必要地缩短，效果如下：

利用外边距可以实现：

ml-auto 表示 margin-left:auto ，效果使得当前元素水平居右。

mx-auto 表示左右外边距都为 auto ，效果是水平居中。

align-*

作用于当前元素 ，效果如下：

效果如下：

text-wrap

字体会自动换行，适用于 规定宽度 的div中的字体。

不包裹字体则是 text-nowarp 。

text-truncate

适用于块级元素中的字体。

text-*

效果如下：

list-unstyled 列表无黑点

list-inline 行内列表
list-inline-item 行内列表中的一项

使用如下：

见官网 表格

blockquote 设置为块引用
blockquote-footer 块引用的引脚

效果如下：

bootstrap框架怎么使用

全局样式
1
Bootstrap 中用到一些 HTML元素和CSS属性需要将页面设置为 HTML5 文档类型，即在页面顶部添加“《!DOCTYPE html》”
2
布局容器：Bootstrap 需要为页面内容和栅格系统包裹一个 .container或container-fluid（占据全部视口viewport的容器）容器。
3
栅格系统，Bootstrap 提供了一套最多12列的流式栅格系统，通过 .row表示行 和 .col-xs-4 这种表示宽度的列快速创建栅格布局。
4
Bootstrap 排版、链接样式设置了基本的全局样式。
font-size 设置为 14px，line-height 设置为 1.428。
《p》 （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
基础样式
【排版】，
1. 标题，可以用来.h1 到 .h6 类给内联属性的文本赋予标题样式，标题内通过《small》 标签或带.small 类的元素标记副标题。
主体文本：.lead 类让段落突出显示。
2. 内联文本，使用《mark》 标签表示标注文本，《del》删除，《s》无用，《ins》插入，《u》下划线，《small》小号（父容器字体大小的 85%），《strong》着重，《em》斜体。
3. 文本对齐类，text-left，text-center，text-right，text-justify，text-nowrap
4. 文本大小写类，text-lowercase，text-uppercase，text-capitalize
5. 缩略语类，为 《abbr》 元素设置 title属性并使用.initialism 类让 font-size 变得稍微小些。例：《abbr title="attribute" class="initialism"》attr《/abbr》
6. 地址，以日常使用的格式呈现，在行结尾加 《br》 保留需要的样式即可。
7. 引用，将 HTML 元素包裹在 《blockquote》 中即可表现为引用样式。对于直接引用，建议用 《p》 标签。
8. 列表，list-unstyled类移除默认 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。list-inline类通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。dl-horizontal类让 《dl》 内的短语及其描述排在一行。
【代码】
《code》 标签包裹内联样式的代码片段，
《kbd》 标签标记用户通过键盘输入的内容，
《pre》 展示代码块 。可用pre-scrollable 类设置最高350px带垂直滚动条。
《var》 标签标记变量，
《samp》 标签标记程序输出的内容。
【表格】
.table 类指定基本样式，
.table-striped 条纹样式，
.table-bordered 类为边框样式，
.table-hover 类带鼠标悬停样式，
.table-condensed 类紧凑样式。
状态类(行或单元格设置颜色)：active，success，info，warning，info。
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其
响应式表格: 会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
【表单】
1. 基本实例，所有设置了 .form-control 类的 《input》、《textarea》 和 《select》 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
不要讲表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
form-group，input-group，control-group，
2. 内联表单，《form》 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
在内联表单中单选/多选框控件的宽度设置为 width: auto;
如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label 设置 .sr-only 类将其隐藏。
3. 水平排列的表单
通过为表单添加 .form-horizontal 类改变 .form-group 的行为，使其表现为栅格系统中的行（row）
4. 多选和单选框
.radio、.radio-inline、.checkbox、.checkbox-inline 。
5. 静态控件
水平布局的表单中，如需将一行纯文本和 label 元素放置于同一行，为 《p》 元素添加 .form-control-static类即可。
6. 控件状态
.disabled类禁用控件，为《fieldset》 设置disabled 时则禁用包含的所有控件。
a标签不受此类影响。
readonly 属性可以禁止用户输入
.has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
你还可以针对校验状态为输入框添加额外的图标（注意依赖于label标签）。只需设置相应的 .has-feedback 类并添加正确的图标即可。
7. 控件尺寸
通过 .input-lg .input-sm类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度
通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。
用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。
8. 辅助文本
help-block类，针对表单控件的“块（block）”级辅助文本。
【按钮】
1. 基本样式，btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active
2. 展现形式，btn-link、btn-block、close
3. 尺寸样式，.btn-lg、.btn-sm 、.btn-xs 。
可通过 《a》、《button》 或 《input》 元素应用按钮类，但建议用 《button》 元素来获得在各个浏览器上获得相匹配的绘制效果。
6
【图片】
图片形状，img-rounded，img-circle，img-thumbnail，IE8 不支持 CSS3 中的圆角属性。
7
【辅助】
text-muted、text-primary、text-success、text-info、text-warning、text-danger
bg-primary、bg-success、bg-info、bg-warning、bg-danger、
三角符号，caret
浮动
居中
组件样式
【图标】
200个来自 Glyphicon Halflings 的字体图标，
图标类只能应用在空元素上，且不可与其它组件联合使用。
《span class="glyphicon glyphicon-search"》《/span》
【菜单】
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里
菜单对齐：默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐
菜单分组：dropdown-header表描述项，.disabled 表禁用项
向上弹出： .dropup 类就能使触发的下拉菜单朝上方打开
【按钮组】
按钮组.btn-group，通过.btn-group-* 指定组中按钮尺寸。
按钮栏.btn-toolbar
钮垂直堆叠排列显示btn-group-vertical
两端对齐排列的按钮组btn-group-justified
【导航】
标签页.nav-tabs 类依赖 .nav 基类。
胶囊式标签页.nav-pills 类，添加 .nav-stacked 类改为垂直堆叠。
.nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。
navbar navbar-default
对于不包含在 《form》 中的 《button》 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。
将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，
.navbar-text
.navbar-link
.navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。
.navbar-fixed-top 类可以让导航条固定在顶部
.navbar-fixed-bottom 类可以让导航条固定在底部
.navbar-static-top 类可让导航条随着页面向下滚动而消失。
.navbar-inverse 类可以改变导航条的外观。
breadcrumb 创建带有层次的导航结构（面包屑）。
【分页】
pagination，并根据情况对页码使用.disabled 类、 .active 类。
.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。
pager上一页和下一页的简单翻页。并可通过previous，next类标示。
【标签】
label标签基类，可通过label-default, label-primary, label-success, label-info, label-warning, label-danger改变标签的外观。
badge，可以很醒目的展示新的或未读的信息条目。
7
【其它】
缩略图
提示框
进度条
媒体对象等
定制样式
1
BootStrap提供了根据自己需要的组件及jquery插件进行定制，使用者也可以直接修改Less源码。
END
总结
1
本篇经验仅从全局简单介绍Bootstrap的内容，细节部分并不具体，Bootstrap的使用非常灵活，可以对各种组件进行合并使用（如：为标签页项 添加带下拉菜单），建议使用过程中实时参考官方文档，官方文档有更详细的下载及使用说明，针对具体样式有直观样例，而且有丰富的主题案例。