Bootstrap 概览

Bootstrap概览

摘选自runnoob.com,bootstrap4所有api概览: 一.安装: 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局,而不是使用浮动来布局. .container: width会根据屏幕尺寸变化 .container-fluid *: width:100% padding-left:15px; padding-right:15px; margin-left:auto; margin-right:…

bootstrap学习笔记--bootstrap概览

HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html> 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),您可能会面临一些浏览器显示不一致的问题,甚至可能面临一些特定情…

目录1.移动设备2.响应式图片3.Normalize4.Containers 1.移动设备在Bootstrap 3中,我们重写了整个框架,使其一开始就是对移动设备友好的.这次不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中.也就是说,Bootstrap是移动设备优先的.针对移动设备的样式融合进了框架的每个角落,而不是一个单一的文件. 为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签. <meta name="viewpo…

Bootstrap教程目录

1.Bootstrap 简介(Web前端CSS框架) 2.Bootstrap 学习资料 3.Bootstrap 入门 4.Bootstrap 概览 5.Bootstrap 栅格系统 6.Bootstrap 斜体.文本对齐.缩略图.地址.列表等如果,您认为阅读这篇博客让您有些收获,不妨点击一下右下角的[推荐]. 如果,您希望更容易地发现我的新博客,不妨点击一下左下角的[关注我]. 如果,您对我的博客所讲述的内容有兴趣,请继续关注我的后续博客,我是[Ruthless]. 本文版权归作者和博客园共有…

Bootstrap <基础三十一>插件概览

在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手学习 Bootstrap 的 JavaScript 插件.利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况被触发. 站点引用 Bootstrap 插件的方式有两种: 单独引用:使用 Bootstrap 的个别的 *.js 文件.一…

Bootstrap<基础一> CSS 概览

Bootstrap CSS概览代码文字标注篇

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap 练习</title> <!--Bootstrap3的设计目标是移动设备优先,然后才是桌面设备.为了让Bootstrap开发的网站对移动设备友好,确保适当的绘制…

（二）Bootstrap CSS 概览

在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html> 如果在 Bootstrap 创…

响应式开发(四)-----Bootstrap CSS----------Bootstrap CSS概览和相关注意事项

本章先记录一些与Bootstrap CSS相关的一些特点和注意事项以及兼容性. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html> 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(…

Bootstrap进阶三：jQuery插件概览

单个还是全部引入 JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 *.js 文件),或者一次性全部引入(使用 bootstrap.js 或压缩版的 bootstrap.min.js). 建议使用压缩版的 JavaScript 文件 bootstrap.js 和 bootstrap.min.js 都包含了所有插件,你在使用时,只需选择一个引入页面就可以了. 插件之间的依赖关系某些插件和 CSS 组件依赖于其它插件.如果你是单个引入每个插件的,请确保在文档中检查插件之…

Bootstrap CSS概览

HTML5文档类型(<!DOCTYPE html>) Bootstrap前端框架使用了HTML5和CSS属性,为了让这些能正常工作,您需要使用HTML5文档类型(<!DOCTYPE html>),如果您在使用Bootstrap前端框架创建网页时没有使用HTML5文档类型时,您可能会面临浏览器显示不一致的问题,甚至可能面临一些特定情境下的不一致,以致于您的代码不能通过 W3C 标准的验证. 移动设备优先移动设备优先是Bootstrap是显著的特点,为了让Bootstrap开发的网站…

Bootstrap 之 Carousel

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引用该插件的功能,那么您需要引用 carousel.js.或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 下面是一个简单的幻灯片,使用 Bootstrap 轮播(Carousel)插件显示了一个循环播放元素的…

Bootstrap Affix(附加导航（Affix）插件的用法)

原文网址:http://www.runoob.com/bootstrap/bootstrap-affix-plugin.html Bootstrap 附加导航(Affix)插件附加导航(Affix)插件允许某个 <div> 固定在页面的某个位置.您也可以在打开或关闭使用该插件之间进行切换.一个常见的例子是社交图标.它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动. 如果您想要单独引用该插件的功能,那么您需要引用 affix…

Bootstrap 模态框（Modal）插件

原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 modal.js.或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 …

Bootstrap <基础三十二>模态框（Modal）插件

模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 modal.js.或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 用法您可以切换模态框(Modal)插件的隐藏内容: 通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggl…

Bootstrap <基础三十>Well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了一个默认的 Well: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默认的 Well</title> <link href="/bootstrap/css/bootstrap…

Bootstrap <基础二十九>面板（Panels）

Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可,如下面的实例所示: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默认的面板</title> <link href="/bootstrap/css…

Bootstrap <基础二十八>列表组

列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 class .list-group-item. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的列表组</title> <link href="/boo…

Bootstrap<基础二十七> 多媒体对象（Media Object）

Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的代码来实现媒体对象与文字的混排. 媒体对象轻量标记.易于扩展的特性是通过向简单的标记应用 class 来实现的.你可以在 HTML 标签中添加以下两种形式来设置媒体对象: .media:该 class 允许将媒体对象里的多媒体(图像.视频.音频)浮动到内容区块的左边或者右边. .media-list…