随笔分类 - bootstrap教程
摘要：一、案例 案例页面的代码如下： 关于页面的代码如下 案例和关于的css如下 案例的效果如下 关于的效果如下
阅读全文
摘要：一、咨询内容 CSS如下 结果如下，大屏幕 其他屏幕如下
阅读全文
摘要：一、首页内容介绍 CSS样式如下 当大屏时样式如下： 其他屏幕尺寸如下图
阅读全文
摘要：具体可以参考：http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html 一、轮播图 所需的css如下 结果如下图
阅读全文
摘要：源码如下： 如果是大屏幕，则显示导航栏。如下图 如果屏幕长度不够显示导航栏，则收起导航栏，如下图
阅读全文
摘要：一．附加导航 附加导航即粘贴在屏幕某处实现锚点功能。 实现的效果如下图，导航栏随着内容的改变而高亮显示相应的导航栏目，图中橙色部分即是该功能的实现， JavaScript 代替 data-spy="affix" data-offset-top="125" 默认使用的是 top，当然也可以默认居底 b
阅读全文
摘要：一．轮播 轮播插件就是将几张同等大小的大图，按照顺序依次播放。 1、基本实例 data 属性解释： 2、轮播插件有三个自定义属性： 如果在 JavaScript 调用就直接使用键值对方法，并去掉 data-； 3、轮播插件还提供了一些方法 4、事件
阅读全文
摘要：一．按钮 1、基本实例 如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle="button" 作为其属性即可。 注：在 Firefox 多次页面加载时，按钮可能保持表单的禁用或选择状态。解决方案是： 添加 autocomplet
阅读全文
摘要：一．弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器。 1、基本实例 2、可配置的属性 data-viewport的用法，如下 3、方法 通过 JavaScript 执行的方法有四个。 4、事件 Popover 插件中事件有两种。 二．警告框 警告框即为点击小时的信息框。 1、基本实例 添加
阅读全文
摘要：一．标签 标签页也就是通常所说的选项卡功能。 1、基本实例 其中淡入淡出效果 fade，而 in 表示首选的内容默认显示 可以换成胶囊式 <ul class="nav nav-pills"> 使用 data-target 绑定或不绑定效果都是一样的 使用 JavaScript，直接使用 tab 方法
阅读全文
摘要：一．下拉菜单 1、基本实例 声明式用法的关键核心： 如果按钮在容器外部，可以通过 data-target 进行绑定，代码和效果如下，子菜单栏距离需要调整。 2、在 JavaScript 调用中，没有属性，方法并不好用，下面介绍四个基本事件。 3、下拉菜单支持 4 种事件，分别对应弹出前、弹出后、关闭
阅读全文
摘要：一．基本使用 使用模态框的弹窗组件需要三层 div 容器元素，分别为 modal(模态声明层)、 dialog(窗口声明层)、content(内容层)。在内容层里面，还有三层，分别为 header(头 部)、body(主体)、footer(注脚)。 1、基本实例 2、如果想让模态框自动隐藏，然后通过
阅读全文
摘要：一．列表组组件 1、基本实例 2、表项带勋章 3、链接和首选 4、按钮式列表 5、设置项目被禁用 6、情景类 7、定制内容 二．面板组件 1、基本实例 2、带标题容器的面板 3、设置标题元素 4、带注脚的面板 5、情景效果：default、success、info、warning、danger、pr
阅读全文
摘要：一．Well 组件 有 lg 和 sm 两种可选值 二．进度条组件 三．媒体对象组件 媒体对象可以包含图片、视频或音频等媒体，以达到对象和文本组合显示的样式效果。 1、基本实例 2、媒体对象在右边 3、模仿帖子回复功能
阅读全文
摘要：一．巨幕组件 巨幕组件主要是展示网站的关键性区域。 1、100%全屏，没有圆角 二．页头组件 三．缩略图组件 1、缩略图配合响应式 中/大屏幕效果如下图： 小屏效果如下图 超小屏效果如下图 2、图片自定义内容 四．警告框组件 1、基本实例 2、带关闭的警告框 data-dismiss="alert"
阅读全文
摘要：一．路径组件 路径组件也叫做面包屑导航。 二．分页组件 1、基本实例 分页组件可以提供带有展示页面的功能。 2、首选项和禁用 3、设置尺寸，四种 lg、默认、sm 和 xs 4、翻页效果 5、对齐翻页链接 6、翻页项禁用 三．标签 1、 在文本后面带上标签 2、不同色调的标签 四．徽章 1、未读信息
阅读全文
摘要：一．输入框组件 1、基本实例 2、设置尺寸，另外三种分别是默认、xs、sm 3、左侧使用复选框和单选框 4、左侧使用按钮 5、左侧使用下拉菜单或分列式 二．导航组件 1、基本实例 2、胶囊式导航 3、垂直胶囊式导航 4、导航两端对齐 5、带下拉菜单的导航 三．导航条组件 1、基本实例 2、导航条中使
阅读全文
摘要：一．小图标组件 Bootstrap 提供了免费的 263 个小图标，具体可以参考中文官网的组件 链接：http://v3.bootcss.com/components/#glyphicons。部分图标如下： 1、使用标签 可以使用<i>或<span>标签来配合使用，具体如下： 2、结合按钮 二．下拉
阅读全文
摘要：一．辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、 显示关闭图标等等。 1.情景文本颜色 2.情景背景色 3.关闭按钮 4.三角符号 5.快速浮动 这个浮动其实就是 float，只不过使用了!important 加强了优先级。 6.块级居中 注：就是
阅读全文
摘要：一、移动设备优先 在 HTML5 中有一份非常重要的 meta，用于设置屏 幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。 //分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放 <meta name="viewport" content="width=device-widt
阅读全文