博客专栏  >  前端   >  Bootstrap学习之路

Bootstrap学习之路

总结归纳bootstrap学习中的知识点,记录学习中遇到的问题和解决方案。方便自己整理思路,也希望能帮助跟我一样正在学习的小伙伴。 路虽远、行则将至,事虽难、做则必成。

关注
5 已关注
17篇博文
  • Bootstrap—进度条progress-bar

    Bootstrap为我们提供具有漂亮样式的进度条来表示一个事务的进度,如下: 实现方法如下: (1)引入bootrap文件, (2)添加一个; (3)在中添加一个 其中, aria-va...

    2016-12-16 16:33
    2523
  • Bootstrap—导航栏

    使用Bootstrap制作导航栏,可以让导航栏具有响应式特性,在移动设备中,导航栏中的组件是折叠的,随着页面宽度的增加,导航栏也会水平展开。 简单的导航栏如下图: 制作步骤: (1)使用na...

    2016-12-15 20:21
    285
  • Bootstrap—面包屑导航breadcrumb

    什么是面包屑导航,先来看一下效果: 面包屑导航是具有层次结构的一种显示方式,bootrap中通过 .breadcrumb class 的无序列表实现面包屑导航效果,代码如下: ...

    2016-12-15 21:49
    993
  • Bootstrap—分页Pagination和翻页Pager

    看新闻或者长内容文章的时候常常看到分页按钮,今天来学一下Bootstrap中的分页和翻页。 分页:

    2016-12-15 22:05
    1311
  • Bootstrap—标签label和徽章badge

    .label label-default 默认的灰色标签 .label label-primary "primary" 类型的蓝色标签 .label label-success "suc...

    2016-12-15 22:31
    970
  • Bootstrap—轻松制作漂亮表格(table)

    学习了runoob.com网站中的bootstrap内容之后,参照其中的内容自己一下总结,以便帮助在这方面有疑惑的朋友,也有助于自己更好的消化所学的内容。 我们应该庆幸自己活在这样一个互联网时代,开放...

    2016-12-12 10:17
    1321
  • Bootstrap—表单学习笔记

    本文知识点借鉴来自http://www.runoob.com/bootstrap/bootstrap-forms.html,里面写的比较详细还给出了例子,这里总结一下重点方便记忆。 一、表单布局 ...

    2016-12-12 22:37
    296
  • Bootstrap—各式各样的按钮

    Bootstrap为我们提供了各式各样漂亮的按钮,我们无需自己给按钮写样式,直接使用它给我们提供的类样式,使用在我们的按钮上,非常的简单方便。 活学活用,自己利用bootstrap的样式来做一个表格...

    2016-12-13 00:00
    2982
  • Bootstrap—实现圆角、圆形头像和响应式图片

    Bootstrap提供了四种用于类的样式,分别是: .img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角; .img-circle:圆形 (IE...

    2016-12-13 10:53
    5167
  • Bootstrap—解决引入本地Bootstrap文件字体图标无法显示问题

    你在使用bootstrap字体图标的时候,是否遇到引用本地Bootstrap文件无法显示字体图标,而使用CDN服务器上bootstrap却能正常显示的问题。 在不能正常显示的时候,比如我要在一个按钮...

    2016-12-13 16:29
    8300
  • Bootstrap—200多种字体图形,你想要的都在这里

    还在辛辛苦苦切精灵图吗,还在使用position小心翼翼将精灵图上的小小图标一个一个显示吗,Bootstrap为我们提供了200多种常用的字体图形,这大大减少了以上说的这些工作。 bootstrap...

    2016-12-13 22:55
    1557
  • Bootstrap—解决下拉菜单不弹出问题

    最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,对照教程感觉代码没错。 我的代码如下: ...

    2016-12-14 00:14
    4091
  • Bootstrap—制作常用下拉菜单

    项目中常常需要用到下来菜单,下面来讲一下如何使用Bootstrap的下拉菜单组件。 先来看一下效果: 这个demo代码如下: 下拉菜单 ...

    2016-12-14 11:32
    413
  • Bootstrap—使用按钮组

    Bootstrap按钮组是将一组按钮放在一个拥有class="btn-group"的div中,这些button给他加上.btn或者.btn-success样式,让这些按钮形成一个组,效果如下: ...

    2016-12-14 13:06
    301
  • Bootstrap—按钮下拉菜单

    按钮下拉菜单,顾名思义,就是一个按钮,点击按钮,弹出下拉菜单。使用bootstrap制作按钮下拉菜单,只需要在一个.btn-grounp中放置按钮和下拉菜单即可。 一般的按钮下拉菜单是这样的: 实现...

    2016-12-14 14:12
    638
  • Bootstrap—输入框组input-group

    相信你在很多的网站页面上都看见过这样的输入框: 这样的输入框我们通过原生的手写css也能实现,但是使用Bootstrap的输入框组会让你实现起来更加简便。 实现在输入框前后添加元素的代码如下: ...

    2016-12-14 22:52
    7047
  • Bootstrap—导航元素

    Bootstrap导航元素使用方法: 1.创建无序列表ul,并添加基类样式.nav。 2.在的class属性中添加需要的导航样式。 导航样式:   (1)标签式导航nav-tabs ...

    2016-12-14 23:49
    199
img博客搬家
img撰写博客
img专家申请
img意见反馈
img返回顶部