BootStrap--CSS组件--大屏幕展播

在设计网页布局的时候,经常会有大屏内容的显示jumbotron 顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin)。 源码中可以看出: 如果jumbotron放在container样式内,则显示圆角;如果不放在里边,则不会显示圆角。<!DOCTYPE h...

2016-12-16 16:35:38

阅读数:309

评论数:0

BootStrap--CSS组件-- 徽章(badge)

在开发交互式系统或者信息系统时,经常要显示一些最新收到的消息、需要有多少审批的消息。 在span或者label上应用该badge样式即可徽章使用//使用 <a href="#" class="btn btn-default">通知<spa...

2016-12-16 16:34:44

阅读数:4239

评论数:0

BootStrap--CSS组件--标签(label)

网页排版的时候,经常要高亮一些标题里的特殊字符或者整个字符。bootstrap提供了一个.label样式用于实现高亮功能。 label主要设置背景色和背景方框//源码 .label { display: inline; padding: .2em .6em .3em; font-si...

2016-12-16 16:23:48

阅读数:990

评论数:0

BootStrap--CSS组件--分页(pagination)和翻页(pager)

几乎所有网站内容都需要分页显示,一个用户体验良好的分页组件会得到访问用户的良好评价。//源码 .pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .p...

2016-12-16 16:22:50

阅读数:4242

评论数:0

BootStrap--CSS组件--面包屑导航(breadcrumb)

面包屑breadcrumb一般用于导航,表示当前页面所在的位置 面包屑可以设置其他相关的小标记内容,比如标签、徽章标记等。//源码 //基础样式 .breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: non...

2016-12-16 15:58:16

阅读数:3951

评论数:0

BootStrap--CSS组件--导航条(navbar)

1.基础导航条navbar navbar-default navbar-header navbar-brand nav navbar-nav 2.导航条中的表单navbar navbar-default navbar-header navbar-brand navbar-form 3.导航条中...

2016-12-16 15:56:03

阅读数:3176

评论数:0

BootStrap--CSS组件--导航(nav)

//源码 .nav { padding-left: 0; margin-bottom: 0; list-style: none; } .nav > li { position: relative; display: block; } .nav > li > a...

2016-12-16 15:54:58

阅读数:769

评论数:0

BootStrap--CSS组件--输入框组(input-group)

了解table-cell的表格width设置为1%的原因。http://www.tuicool.com/articles/VzUVfyi 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素。例如,您可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的...

2016-12-16 15:53:56

阅读数:12782

评论数:0

BootStrap--CSS组件--按钮下拉菜单

1 按钮下拉菜单结合使用.btn-group(btn-group-lg/btn-group-sm/btn-group-xs) .dropup .btn .dropdown-menu 按钮下拉菜单是在普通的下拉菜单的基础上封装了.btn样式得效果,就类似于单击一个button按钮,然后显示隐藏的下...

2016-12-16 15:51:48

阅读数:389

评论数:0

BootStrap--CSS组件--按钮组(btn-group)

.btn-toolbar(有助于几组btn-group结合到一个btn-toolbar中)/.btn-group(btn-group-lg/btn-group-sm/btn-group-xs)/.btn-group-vertical 容器内的按钮,可以使用button元素,也可以使用a元素,产生...

2016-12-16 15:33:30

阅读数:2968

评论数:0

BootStrap--CSS组件--下拉菜单(dropdown)

dropdown、dropdown-menu、dropdown-header、divider、dropdown-submenu 例子见下拉菜单.html//源码 .dropup, .dropdown { position: relative; } .dropdown-toggle:focus...

2016-12-16 15:29:23

阅读数:1537

评论数:0

BootStrap--CSS组件--字体图标(glyphicon)

使用的时候同时使用两个样式,即.glyphicon和.glyphicon-/* 开头的样式//字体图标.html <div class="btn-toolbar"> <div class="btn-group"> ...

2016-12-16 15:27:59

阅读数:1247

评论数:0

BootStrap--CSS布局--图像

img-rounded、img-circle、img-thumbnail(缩放图模式)//源码 img { vertical-align: middle; } .img-responsive, .thumbnail > img, .thumbnail a > img, .carou...

2016-12-16 15:25:19

阅读数:230

评论数:0

BootStrap--CSS布局--按钮

1 按钮按钮是任何系统都不能缺少的组件,设置到按钮的大小、颜色、状态等。//btn源码 .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight...

2016-12-16 15:22:25

阅读数:202

评论数:0

BootStrap--CSS布局--表单

1. 表单表单是html网页交互很重要的部分,同时也是BootSTrap框架中的核心内容,表单提供了丰富的样式(基础、内联、横向)表单的元素 input textarea select checkbox radio(checkbox和radio是input的特殊类型) 其他标签 form f...

2016-12-16 15:14:00

阅读数:474

评论数:0

BootStrap--CSS布局--表格

表格组件中,BootStrap提供了 1种基础.table样式 4种附加样式(.table-striped/.table-bordered/.table-hover/.table-condensed) 1种支持响应式布局的.table-responsivetable样式//源码 table ...

2016-12-15 14:28:03

阅读数:467

评论数:0

BootStrap--CSS布局--代码

Bootstrap对代码显示提供了三种方式:内联代码1.使用 元素显示单行内联代码内联代码主要是设置code元素的背景颜色和其内部的文字颜色。//用法 <code>&lt;body&gt;&lt;/body&gt;</code>//源码 co...

2016-12-15 14:25:13

阅读数:243

评论数:0

BootStrap--CSS布局--列表

列表 普通列表ul li 有序列表ol li 去点列表.list-unstyled 内联列表.list-inline 定义列表dl dt dd 水平定义列表dl-horizontalul, ol { margin-top: 0; margin-bottom: 10px; } u...

2016-12-15 13:11:22

阅读数:224

评论数:0

BootStrap--整体框架--JavaScript插件架构

1. JavaScript插件架构如下是插件alert的全部代码,每个插件都定义在如下类似的作用域中:+function ($) { 'use strict'; // ALERT CLASS DEFINITION // ====================== var dismis...

2016-12-13 14:54:43

阅读数:1506

评论数:0

BootStrap--整体框架--基础布局组件

1 基础布局组件在12栅格系统上基础上,BootStrap还提供了多种基础布局组件。 CSS组件,总结为8大类型的样式: 基础样式、颜色样式、尺寸样式、状态样式、特殊元素样式、并列元素样式、嵌套子元素样式、动画样式1.1基础样式基本样式,一般包含文本字体,颜色背景,边框,定位等,如下面警告框:...

2016-12-07 21:47:30

阅读数:1337

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭