Bootstrap
文章平均质量分 79
Tiramisu_C
认定的事,如果不执着,就什么都没有。
展开
-
Bootstrap—轻松制作漂亮表格(table)
学习了runoob.com网站中的bootstrap内容之后,参照其中的内容自己一下总结,以便帮助在这方面有疑惑的朋友,也有助于自己更好的消化所学的内容。我们应该庆幸自己活在这样一个互联网时代,开放、共享。很多之前我们费尽心思去实现的效果已经有前辈为我们总结出来并做成很好的框架,共享出来让我们使用,使得我们轻松就能实现很漂亮的效果。下面就使用一个实例来讲一下如何使用Bootstrap现成的原创 2016-12-12 10:17:45 · 32253 阅读 · 1 评论 -
Bootstrap—导航元素
Bootstrap导航元素使用方法:1.创建无序列表ul,并添加基类样式.nav。2.在的class属性中添加需要的导航样式。导航样式: (1)标签式导航nav-tabs 导航1 导航2 导航3 导航4 导航5 导航6(原创 2016-12-14 23:49:51 · 724 阅读 · 0 评论 -
Bootstrap—按钮下拉菜单
按钮下拉菜单,顾名思义,就是一个按钮,点击按钮,弹出下拉菜单。使用bootstrap制作按钮下拉菜单,只需要在一个.btn-grounp中放置按钮和下拉菜单即可。一般的按钮下拉菜单是这样的:实现代码如下: 按钮下拉菜单 服务原创 2016-12-14 14:12:44 · 2857 阅读 · 2 评论 -
Bootstrap—使用按钮组
Bootstrap按钮组是将一组按钮放在一个拥有class="btn-group"的div中,这些button给他加上.btn或者.btn-success样式,让这些按钮形成一个组,效果如下:从图片中可以看出,使用按钮组包裹起来的按钮,当点击其中一个按钮时,此按钮呈现点击的状态,并当你点击非此按钮的区域时,这个点击的状态才会消失。代码如下: 按钮组原创 2016-12-14 13:06:31 · 916 阅读 · 1 评论 -
Bootstrap—进度条progress-bar
Bootstrap为我们提供具有漂亮样式的进度条来表示一个事务的进度,如下:实现方法如下:(1)引入bootrap文件, (2)添加一个;(3)在中添加一个其中,aria-valuenow="40"——进度条目前进度值。aria-valuemax="100"——最大进度值。aria-valuemin=“0”——最小进度值。style="w原创 2016-12-16 16:33:21 · 14003 阅读 · 3 评论 -
Bootstrap—制作常用下拉菜单
项目中常常需要用到下来菜单,下面来讲一下如何使用Bootstrap的下拉菜单组件。先来看一下效果:这个demo代码如下: 下拉菜单 下拉菜单 社区 服务原创 2016-12-14 11:32:06 · 3042 阅读 · 2 评论 -
Bootstrap—标签label和徽章badge
.label label-default 默认的灰色标签.label label-primary "primary" 类型的蓝色标签.label label-success "success" 类型的绿色标签.label label-info "info" 类型的浅蓝色标签.label label-warning "warning" 类型的黄色标签.label lab原创 2016-12-15 22:31:02 · 5251 阅读 · 0 评论 -
Bootstrap—分页Pagination和翻页Pager
看新闻或者长内容文章的时候常常看到分页按钮,今天来学一下Bootstrap中的分页和翻页。分页:原创 2016-12-15 22:05:56 · 4555 阅读 · 0 评论 -
Bootstrap—面包屑导航breadcrumb
什么是面包屑导航,先来看一下效果:面包屑导航是具有层次结构的一种显示方式,bootrap中通过 .breadcrumb class 的无序列表实现面包屑导航效果,代码如下: 面包屑导航 鞋子 女鞋 高跟鞋 本文原创 2016-12-15 21:49:40 · 4100 阅读 · 1 评论 -
Bootstrap—导航栏
使用Bootstrap制作导航栏,可以让导航栏具有响应式特性,在移动设备中,导航栏中的组件是折叠的,随着页面宽度的增加,导航栏也会水平展开。简单的导航栏如下图:制作步骤:(1)使用nav标签包裹住导航,加入class="navbar navbar-default"样式。(2)nav中放入导航项。这里放一个class="container"的div,然后再放入组件,如此可让导航内原创 2016-12-15 20:21:57 · 1334 阅读 · 0 评论 -
Bootstrap—解决下拉菜单不弹出问题
最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,对照教程感觉代码没错。我的代码如下: 下拉菜单 点击弹出下来菜单 1原创 2016-12-14 00:14:57 · 34109 阅读 · 11 评论 -
Bootstrap—200多种字体图形,你想要的都在这里
还在辛辛苦苦切精灵图吗,还在使用position小心翼翼将精灵图上的小小图标一个一个显示吗,Bootstrap为我们提供了200多种常用的字体图形,这大大减少了以上说的这些工作。bootstrap 3.x以上支持字体图形,glyphicons为我们提供了各式各样常用图标。参照http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons原创 2016-12-13 22:55:12 · 9811 阅读 · 0 评论 -
Bootstrap—实现圆角、圆形头像和响应式图片
Bootstrap提供了四种用于类的样式,分别是:.img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角;.img-circle:圆形 (IE8 不支持),添加 border-radius:50% 来让整个图片变成圆形。.img-thumbnail:缩略图功能,添加一些内边距(padding)和一个灰色的边框。.img-resp原创 2016-12-13 10:53:47 · 30853 阅读 · 1 评论 -
Bootstrap—解决引入本地Bootstrap文件字体图标无法显示问题
你在使用bootstrap字体图标的时候,是否遇到引用本地Bootstrap文件无法显示字体图标,而使用CDN服务器上bootstrap却能正常显示的问题。在不能正常显示的时候,比如我要在一个按钮中使用一个√的字体图标,我的代码是这样子的: bootstrap字体图标 但是他的显示却是这个样子的:网上查找原创 2016-12-13 16:29:48 · 61384 阅读 · 16 评论 -
Bootstrap—表单学习笔记
本文知识点借鉴来自http://www.runoob.com/bootstrap/bootstrap-forms.html,里面写的比较详细还给出了例子,这里总结一下重点方便记忆。一、表单布局1.垂直表单(默认) 向父 元素添加 role="form"。 把标签和控件放在一个带有 class .form-group 的 中。这是获取最佳间距所必需的。原创 2016-12-12 22:37:42 · 757 阅读 · 1 评论 -
Bootstrap—输入框组input-group
相信你在很多的网站页面上都看见过这样的输入框:这样的输入框我们通过原生的手写css也能实现,但是使用Bootstrap的输入框组会让你实现起来更加简便。实现在输入框前后添加元素的代码如下: 输入框组 @原创 2016-12-14 22:52:14 · 41958 阅读 · 5 评论 -
Bootstrap—各式各样的按钮
Bootstrap为我们提供了各式各样漂亮的按钮,我们无需自己给按钮写样式,直接使用它给我们提供的类样式,使用在我们的按钮上,非常的简单方便。活学活用,自己利用bootstrap的样式来做一个表格,里边放一些知识点:类样式描述.btn圆角灰色按钮,为了让按钮不那么尖锐,我们的按钮都应该使用这个样式来获得圆角,然后再覆盖上其他的特性原创 2016-12-13 00:00:29 · 27634 阅读 · 0 评论