![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
bootstrap3
文章平均质量分 86
黄泽平
深耕前端,努力前进!
展开
-
响应式前端框架Bootstrap系列(1)浅谈Bootstrap
有一段时间没写博客了,在忙着公司的项目上线。最近终于有了点空闲时间,打算写一些关于前端响应式框架,头脑中第一时间就冒出了Bootstrap,毕竟它是Github上Star数最多的框架之一,下面简称bs。虽然bs的中文资料还蛮多的,百度一下就有一堆,但为了方便记忆,我还是想写一系列博文把它们分类总结一下。平心而论,作为一个前端工程师,我并不会很热衷于使用bs框架,因为我参与的项目中至少会原创 2018-01-10 13:45:30 · 3482 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(12)警告框
警告框(Alert)消息大多是用来向终端用户显示诸如警告或确认消息的信息。警告框的样式有以下几种:.alert .alert-success:表示成功。.alert .alert-info:表示信息。.alert .alert-warning:表示警告。.alert .alert-danger:表示危险。.alert-dismissable:放置在带.alert的中,常与一个带原创 2018-01-15 10:24:24 · 1526 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(13)进度条
进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画。进度条的颜色样式有以下几种:.progress-bar-success、.progress-bar-info、.progress-bar-warning、.progress-bar-danger。演示代码: 默认进度原创 2018-01-15 10:44:24 · 1428 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(14)列表组
列表组件用于以列表形式呈现复杂的和自定义的内容。比如说可以用于制作API列表界面,列表组样式有以下几种:.list-group:列表组样式定义.list-group-item:列表组选项样式定义.list-group-item-heading:选项标题.list-group-item-text:选项文本常用格式有两种:第一种: 第二种: 普通原创 2018-01-15 11:17:54 · 494 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(15)面板
面板组件用于把 DOM 组件插入到一个盒子中,比如组件表格或者列表组。面板的主要界面效果用于如超市的物价面板、动车进出站实时信息面板等。有关面板的样式有以下几种:.panel .panel-default:默认面板格式。.panel-primary:面板前景色.panel-heading:面板头部.panel-title:面板头部标题.panel-body:面板主体内容,一般为原创 2018-01-15 11:42:39 · 441 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(17)滚动监听(Scrollspy)插件
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class。Scrollspy的样式有以下几种:data-spy="scroll",放在想要监听的元素,一般为或data-target=".navbar",滚动导航栏,一般为data-offset,当计算滚动原创 2018-01-15 14:58:05 · 3516 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(18)提示工具(Tooltip)插件
当您想要描述一个链接的时候,提示工具(Tooltip)就显得非常有用。提示工具(Tooltip)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。激活脚本:$(function() {$("[data-toggle='tooltip']").tooltip();});Tooltip的API如下:原创 2018-01-15 15:55:55 · 963 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(19)折叠(Collapse)插件
折叠(Collapse)插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项。折叠插件API如下入参项:(1)parent,属性data-parent(默认为false),如果提供了一个选择器,当可折叠项目显示时,指定父元素下的所有可折叠的元素将被关闭。(2)toggle,属性data-toggle(默认为true),切换调用可折叠元素。原创 2018-01-15 17:02:49 · 3652 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(16)模态框(Modal)插件
模态框是bs框架的插件之一,之所以称为插件,是因为它有这自己的一套API,可以通过API提供的接口实现对模态框的控制。只要 是bs框架插件,都支持以下几个共同的属性:data-toggle属性:表示点击或链接时触发的事件。data-target属性:表示点击或链接时触发的事件后将要被显示或隐藏的目标元素。data-dismiss:是bootstrap里自定义的属性,给一个元素data-原创 2018-01-15 14:33:01 · 2534 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(8)图片处理
bs对图片的处理只有简单的遮罩功能,如把一张图片变为圆形、正方形等。.img-rounded:为图片添加圆角 .img-circle:将图片变为圆形.img-thumbnail:缩略图功能.img-responsive:块级显示,宽为100%,高为自适应。图片响应式 (将很好地扩展到父元素)演示代码: img { width: 200px; height:原创 2018-01-12 16:03:10 · 583 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(10)字体图标和消息徽章
字体图标是bs框架中非常好用的一个功能,只要添加简单的样式,无需导入图标即可实现图标的显示。通常使用渲染字体图标,并将该元素放置在或内。这个是bs提供的字体图标的地址:http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm演示代码: User Tree-deciduous原创 2018-01-13 15:48:31 · 2110 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(2)网格系统
网格系统,也叫栅格系统,是bs中最常用也是最核心的布局方式。大家知道,一个前端界面是由多个块级元素组建而成,而我们常用到的块级元素就是div,网格系统就是将一个div划为等分12列。为了使网格系统能支持不同的分辨率,网格的列定义也分为了4种类型,分别是.col-xs、.col-sm、.col-md、.col-lg,它们与分辨率宽度的对应关系如下:超小设备手机(小型设备平板电脑(≥768px原创 2018-01-10 17:53:04 · 1090 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(3)段落、文字相关
本篇主要分享关于bs中段落、文本的组件样式,是一些较简单的样式实现。段落元素用表示,较常用与段落元素样式有:文字颜色、背景颜色和对齐方式。文字颜色样式主要有以下6种:.text-muted:减弱.text-primary:主要.text-success:成功.text-info:信息.text-warning:警告.text-danger:危险演示代码:原创 2018-01-11 14:00:17 · 1599 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(4)表格
通过bs,可以很轻松地建出一个表格组件。以下是建表格组件必须认识的一些标签。标签描述为表格添加基础样式。表格标题行的容器元素(),用来标识表格列。表格主体中的表格行的容器元素()。一组出现在单行上的表格单元格的容器元素( 或 )。默认的表格单元格。原创 2018-01-11 15:16:23 · 4049 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(5)表单
本篇介绍几种常用的表单组件:输入框、文本框、选择框、单选框和多选框。输入框代码演示: 当输入框需要配合标识符或按钮组合使用时,可以使用输入框组,用.input-group表示输入框组的样式,.input-group-addon表示标识符样式,input-group-btn表示按钮样式。代码演示: @ 搜索 效果图:文本框常用于博客留言或原创 2018-01-11 17:38:24 · 1641 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(7)按钮
按钮是前端最常用到的组件,bs提供有关按钮的样式有分为独立按钮、按钮组和按钮插件三种。独立按钮,可用于, , 或 元素上。(1)颜色样式:.btn-default:默认/标准按钮.btn-primary:主要.btn-success:成功.btn-info:信息.btn-warning:警告.btn-danger:危险演示代码:默认按钮原始按钮原创 2018-01-12 14:58:27 · 3218 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(9)导航条与导航栏
导航条,是网页设计中不可缺少的部分,它是指通过一定的技术手段,为网站的访问者提供一定的途径,使其可以方便地访问到所需的内容,是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。导航栏则是指除了导航条外,还可能有搜索、登录和注册等功能块,常位于网页中的最顶部。导航条bs提供的导航条有两种:标签式和胶囊式。标签式导航条用.nav .nav-tabs样式表示,胶囊式用.nav .nav-原创 2018-01-13 14:33:55 · 6821 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(6)下拉列菜单
下拉列菜单,是以列表格式显示链接的上下文菜单。下拉列菜单选择后,是打开超链接的新页面,此处要清楚与上篇中选择框的区别。下拉列菜单可以单独使用,但更多的配合导航栏使用。下面是下拉列菜单用到的几种样式:.dropdown:指定下拉菜单整体样式,下拉菜单都包裹在 .dropdown 里,与之相反的是.dropup.dropdown-toggle:指下拉列点击按钮样式,按钮内常含尖角符号.dr原创 2018-01-12 10:22:30 · 1942 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(11)分页
分页功能已经封装成一个独立的js文件,也是用bs完成的,名称为bootstrap-paginator.js。使用前先导入文件 :演示代码: 分页 $(function() { var currentPage = 1; var totalPages = 2; $("#page").bootstrapPaginator({ bootst原创 2018-01-13 16:29:11 · 7755 阅读 · 0 评论 -
响应式前端框架Bootstrap系列(20)附加导航(Affix)插件
附加导航(Affix)插件允许某个 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始,但当页面点击某个标记,该 会锁定在某个位置,不会随着页面其他部分一起滚动。附加导航API只有一个,入参项:offset,属性data-offset(默认值为10),当计算滚动位置时,距离顶部的偏移像素。如果设置了一个数字,则该偏移量的值将原创 2018-01-15 17:17:20 · 963 阅读 · 0 评论