2016年12月_github_34514750

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

在设计网页布局的时候，经常会有大屏内容的显示jumbotron 顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。源码中可以看出：如果jumbotron放在container样式内，则显示圆角;如果不放在里边，则不会显示圆角。<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8

2016-12-16 16:35:38 644

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

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

2016-12-16 16:34:44 9524

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

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

2016-12-16 16:23:48 2919

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

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

2016-12-16 16:22:50 6355

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

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

2016-12-16 15:58:16 5180

原创 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.导航条中的按钮，文本，链接navbar-btn、bavbar-text、navbar-link 4.导航条中的

2016-12-16 15:56:03 9541

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

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

2016-12-16 15:54:58 1538

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

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

2016-12-16 15:53:56 20782

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

1 按钮下拉菜单结合使用.btn-group(btn-group-lg/btn-group-sm/btn-group-xs) .dropup .btn .dropdown-menu 按钮下拉菜单是在普通的下拉菜单的基础上封装了.btn样式得效果，就类似于单击一个button按钮，然后显示隐藏的下拉菜单。组合式下拉菜单分离式下拉菜单向上弹起的下拉菜单//源码，css实现方式主要是设置.dro

2016-12-16 15:51:48 811

原创 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元素，产生的效果是一样的。容器的多个分组以table风格进行显示，每组之间保持5px的left margin//源

2016-12-16 15:33:30 6006

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

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

2016-12-16 15:29:23 2911

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

使用的时候同时使用两个样式，即.glyphicon和.glyphicon-/* 开头的样式//字体图标.html<div class="btn-toolbar"> <div class="btn-group"> <a href="#" class="btn btn-default"><span class="glyphicon glyphicon-align-left"><

2016-12-16 15:27:59 2004

原创 BootStrap--CSS布局--图像

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

2016-12-16 15:25:19 449

原创 BootStrap--CSS布局--按钮

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

2016-12-16 15:22:25 437

原创 BootStrap--CSS布局--表单

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

2016-12-16 15:14:00 744

原创 BootStrap--CSS布局--表格

表格组件中，BootStrap提供了 1种基础.table样式 4种附加样式(.table-striped/.table-bordered/.table-hover/.table-condensed) 1种支持响应式布局的.table-responsivetable样式//源码table { background-color: transparent;}caption { pad

2016-12-15 14:28:03 697

原创 BootStrap--CSS布局--代码

Bootstrap对代码显示提供了三种方式：内联代码1.使用元素显示单行内联代码内联代码主要是设置code元素的背景颜色和其内部的文字颜色。//用法<code><body></body></code>//源码code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color:

2016-12-15 14:25:13 520

原创 BootStrap--CSS布局--列表

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

2016-12-15 13:11:22 468

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

1. JavaScript插件架构如下是插件alert的全部代码，每个插件都定义在如下类似的作用域中：+function ($) { 'use strict'; // ALERT CLASS DEFINITION // ====================== var dismiss = '[data-dismiss="alert"]' var Alert = functio

2016-12-13 14:54:43 1912

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

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

2016-12-07 21:47:30 2244

原创 BootStrap--整体框架--CSS12栅格系统

1.整体架构BootStrap框架公共六个部分：(css组件和js插件是其表现形式，其余的是基础支撑平台) 表现形式 CSS组件 JS插件基础支撑平台 CSS12栅格系统基础布局组件 jQuery 响应式设计1.1 CSS12栅格系统12栅格系统是BootStrap的核心功能，也是响应式设计核心理念的一个实现方式。1.1.1 实现原

2016-12-07 16:30:24 11849 1

原创 BootStrap--入门准备

屏幕分辨率(PX)：指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1960*1080。（这里的1像素值得是物理设备的1个像素点）屏幕像素密度(PPI)：屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大

2016-12-07 09:31:27 447

原创 CSS-响应式框架

1.使用流式960网格布局960网格系统不是响应式的，更像一个表格，其列跨越固定宽度的表头。它在960px宽的窗口中布局最完美准备工作960网格布局使用了百分比宽度、左浮动元素替代了固定宽度的网格元素。该版本大数情况下能良好工作，但是当列变得很狭窄时，阅读会变得很困难。并且下载解压流式960网格系统代码，引入grid.css实现方式下面用container_16布局且使用了grid(引用了grid.

2016-12-01 09:51:30 434

王欢的博客