博客专栏  >  前端   >  Bootstrap入门系列及组件归纳应用

Bootstrap入门系列及组件归纳应用

Bootstrap 基于 HTML、CSS、JavaScript ,是一个响应式前端框架。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

关注
0 已关注
20篇博文
  • 响应式前端框架Bootstrap系列(1)浅谈Bootstrap

    有一段时间没写博客了,在忙着公司的项目上线。最近终于有了点空闲时间,打算写一些关于前端响应式框架,头脑中第一时间就冒出了Bootstrap,毕竟它是Github上Star数最多的框架之一,下面简称bs...

    2018-01-10 13:45
    207
  • 响应式前端框架Bootstrap系列(2)网格系统

    网格系统,也叫栅格系统,是bs中最常用也是最核心的布局方式。大家知道,一个前端界面是由多个块级元素组建而成,而我们常用到的块级元素就是div,网格系统就是将一个div划为等分12列。为了使网格系统能支...

    2018-01-10 17:53
    100
  • 响应式前端框架Bootstrap系列(3)段落、文字相关

    本篇主要分享关于bs中段落、文本的组件样式,是一些较简单的样式实现。 段落元素用表示,较常用与段落元素样式有:文字颜色、背景颜色和对齐方式。 文字颜色样式主要有以下6种: .text-muted...

    2018-01-11 14:00
    172
  • 响应式前端框架Bootstrap系列(4)表格

    通过bs,可以很轻松地建出一个表格组件。以下是建表格组件必须认识的一些标签。 标签 描述 为表格添加基础样式。 表格标题行的容器...

    2018-01-11 15:16
    331
  • 响应式前端框架Bootstrap系列(5)表单

    本篇介绍几种常用的表单组件:输入框、文本框、选择框、单选框和多选框。 输入框代码演示: 当输入框需要配合标识符或按钮组合使用时,可以使用输入框组,用.input-group表示输入框组的样式...

    2018-01-11 17:38
    156
  • 响应式前端框架Bootstrap系列(6)下拉列菜单

    下拉列菜单,是以列表格式显示链接的上下文菜单。下拉列菜单选择后,是打开超链接的新页面,此处要清楚与上篇中选择框的区别。下拉列菜单可以单独使用,但更多的配合导航栏使用。下面是下拉列菜单用到的几种样式: ...

    2018-01-12 10:22
    235
  • 响应式前端框架Bootstrap系列(7)按钮

    按钮是前端最常用到的组件,bs提供有关按钮的样式有分为独立按钮、按钮组和按钮插件三种。 独立按钮,可用于, , 或 元素上。 (1)颜色样式: .btn-default:默认/标准按钮 .b...

    2018-01-12 14:58
    178
  • 响应式前端框架Bootstrap系列(8)图片处理

    bs对图片的处理只有简单的遮罩功能,如把一张图片变为圆形、正方形等。 .img-rounded:为图片添加圆角  .img-circle:将图片变为圆形 .img-thumbnail:缩略图功能...

    2018-01-12 16:03
    53
  • 响应式前端框架Bootstrap系列(9)导航条与导航栏

    导航条,是网页设计中不可缺少的部分,它是指通过一定的技术手段,为网站的访问者提供一定的途径,使其可以方便地访问到所需的内容,是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。导航栏则是指除了...

    2018-01-13 14:33
    202
  • 响应式前端框架Bootstrap系列(10)字体图标和消息徽章

    字体图标是bs框架中非常好用的一个功能,只要添加简单的样式,无需导入图标即可实现图标的显示。通常使用渲染字体图标,并将该元素放置在或内。这个是bs提供的字体图标的地址: http://www.run...

    2018-01-13 15:48
    215
  • 响应式前端框架Bootstrap系列(11)分页

    分页功能已经封装成一个独立的js文件,也是用bs完成的,名称为bootstrap-paginator.js。 使用前先导入文件 : 演示代码: 分页 $(f...

    2018-01-13 16:29
    337
  • 响应式前端框架Bootstrap系列(12)警告框

    警告框(Alert)消息大多是用来向终端用户显示诸如警告或确认消息的信息。警告框的样式有以下几种: .alert .alert-success:表示成功。 .alert .alert-info:表...

    2018-01-15 10:24
    167
  • 响应式前端框架Bootstrap系列(13)进度条

    进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画。进度条的颜色样式有以下几种:.p...

    2018-01-15 10:44
    158
  • 响应式前端框架Bootstrap系列(14)列表组

    列表组件用于以列表形式呈现复杂的和自定义的内容。比如说可以用于制作API列表界面,列表组样式有以下几种: .list-group:列表组样式定义 .list-group-item:列表组选项样式定...

    2018-01-15 11:17
    85
  • 响应式前端框架Bootstrap系列(15)面板

    面板组件用于把 DOM 组件插入到一个盒子中,比如组件表格或者列表组。面板的主要界面效果用于如超市的物价面板、动车进出站实时信息面板等。有关面板的样式有以下几种: .panel .panel-def...

    2018-01-15 11:42
    101
  • 响应式前端框架Bootstrap系列(16)模态框(Modal)插件

    模态框是bs框架的插件之一,之所以称为插件,是因为它有这自己的一套API,可以通过API提供的接口实现对模态框的控制。只要 是bs框架插件,都支持以下几个共同的属性: data-toggle属性:表...

    2018-01-15 14:33
    290
  • 响应式前端框架Bootstrap系列(17)滚动监听(Scrollspy)插件

    滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class。 Scroll...

    2018-01-15 14:58
    131
  • 响应式前端框架Bootstrap系列(18)提示工具(Tooltip)插件

    当您想要描述一个链接的时候,提示工具(Tooltip)就显得非常有用。提示工具(Tooltip)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jque...

    2018-01-15 15:55
    133
  • 响应式前端框架Bootstrap系列(19)折叠(Collapse)插件

    折叠(Collapse)插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项。 折叠插件API如下 入参项: (1)parent,属性data-pare...

    2018-01-15 17:02
    106
  • 响应式前端框架Bootstrap系列(20)附加导航(Affix)插件

    附加导航(Affix)插件允许某个 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始,但当页面点击某个标记,该 会锁定在某个位置,不...

    2018-01-15 17:17
    151
img博客搬家
img撰写博客
img发布 Chat
img专家申请
img意见反馈
img返回顶部