2018年12月_有梦的小草

原创 BootStrap-CSS样式_插件_插件概览(介绍)

Bootstrap 插件概览Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况被触发。站点引用 Boot...

2018-12-31 01:38:41 473

原创 BootStrap-CSS样式_布局组件_字体图标(Glyphicons)

什么是字体图标？字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。获取字体图标我们下载了 Bootstrap 3.x 版本，并理解了它的目录结构。在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：1.glyphicons-halflings-...

2018-12-31 00:27:51 2281

原创 BootStrap-CSS样式_布局组件_Well

Well1.Well是一种会引起内容凹陷显示或插图效果的容器 <div>2.创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可尺寸大小使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距（padding），根据使用的类，Well 会...

2018-12-30 21:06:38 317

原创 BootStrap-CSS样式_布局组件_板面(盒子样式)

面板：组件用于把 DOM 组件插入到一个盒子中基本面板向 <div> 元素添加 class .panel 和 class .panel-default 即可面板标题1.使用 .panel-heading class 可以很简单地向面板添加标题容器2.使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标...

2018-12-30 00:13:51 1029

原创 BootStrap-CSS样式_布局组件_列表组（列表徽章链接段落综合应用）

列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：.list-group:向元素 <ul> 添加 class .list-group。.list-group-item:向 <li> 添加 class .list-group-item。.list-group-item-heading：列表组头部样式，应用在标题<h*>标签...

2018-12-28 00:29:05 735

原创 BootStrap-CSS样式_布局组件_多媒体对

多媒体对 Bootstrap 中的多媒体对象（Media Object）：这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的：.media：该 class 允许将媒体对象里的多媒体（图像、视...

2018-12-28 00:03:52 248

原创 BootStrap-CSS样式_布局组件_进度条

默认的进度条创建一个基本的进度条的步骤如下：1.添加一个带有 class .progress 的 <div>。2.接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。3.添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。状态的进度条...

2018-12-27 23:38:16 351

原创 BootStrap-CSS样式_布局组件_警告（Alerts）

基本警告：通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class （即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框可取消的警告:1.同时向上面的 <div> class 添加可选的 .alert-dismissable 2...

2018-12-27 22:57:19 853

原创 BootStrap-CSS样式_布局组件_缩略图

Bootstrap 缩略图大多数站点都需要在网格中布局图像、视频、文本等。 Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：1.在图像周围添加带有 class .thumbnail 的 <a> 标签。2.这会添加四个像素的内边距（padding）和一个灰色的边框。 3.当鼠标悬停在图像上时，会动画显示出图像的轮廓。...

2018-12-27 22:30:16 451

原创 BootStrap-CSS样式_布局组件_超大屏幕页面标题

超大屏幕（Jumbotron）步骤如下：1. 创建一个带有 class .jumbotron. 的容器 <div>。2. 除了更大的 <h1>，字体粗细 font-weight 被减为 200px。页面标题（page-header）页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（Page Header）...

2018-12-27 22:07:50 898

原创 BootStrap-CSS样式_布局组件_徽章（消息提示）

Bootstrap 徽章（Badges）：徽章与标签相似，主要的区别在于徽章的边角更加圆滑。徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可span标签+.badge样式：设置徽章，例如：<span class="badge">50</...

2018-12-20 23:28:09 1027

原创 BootStrap-CSS样式_布局组件_标签

Bootstrap 标签：标签可用于计数、提示或页面上其他的标记显示，使用 class .label 来显示标签label：标签，在不同容器中显示不同大小label-default：默认标签label-primary：主要标签label-success：成功标签label-info：信息标签label-warning：警告标签abel-danger：危险标签代码实例...

2018-12-20 23:10:54 865

原创 BootStrap-CSS样式_布局组件_分页翻页

Bootstrap 支持的分页特性pagination样式：添加该 class 来在页面上显示分页active样式：默认选中，指示当前的页面disbaled样式：定义不可点击的链接Pager样式：添加该 class 来获得翻页链接previous样式：把链接向左对齐next样式：把链接向右对齐。pull-left样式：左浮动pagination-lg样式：外观大...

2018-12-20 22:52:16 2177

原创 BootStrap-CSS样式_布局组件_固定导航栏(顶部底部静态面包屑导航)

固定导航栏Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 <body> 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置。...

2018-12-19 23:41:35 4970

原创 BootStrap-CSS样式_布局组件_导航栏中的(表单按钮文本链接对齐方式)

导航栏中的表单使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项来决定导航栏中的内容放置在哪里。导航栏中的按钮使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和...

2018-12-19 23:23:58 1040

原创 BootStrap-CSS样式_布局组件_响应式导航栏(移动设备折叠随宽度增加展开)

导航栏导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视图宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式默认的导航栏创建一个默认的导航栏的步骤如下：1、向 <nav> 标签添加 class ....

2018-12-18 23:59:11 2284

原创 BootStrap-CSS样式_布局组件_导航元素(导航或标签（Tab页）)

导航元素所涉及样式：nav-tabs样式：呈现表格导航或标签（Tab页）样式nav-pills样式：呈现胶囊式导航菜单（Tab页）样式nav-stacked样式：水平导航设置为堆叠(垂直)效果disabled样式：呈现禁用的导航菜单样式,在li标签中使用active样式：呈现点击激活的样式，在li标签中使用data-toggle="dropdown"属性：绑定下拉菜单d...

2018-12-13 23:44:06 1373

原创 BootStrap-CSS样式_布局组件_按钮组(单一组、工具栏、大小、嵌套、垂直)

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta

2018-12-13 21:45:24 574

原创 BootStrap-CSS样式_布局组件_按钮菜单组件(下拉框上拉框)

菜单按钮涉及样式属性:1. 基本菜单divider样式：显示下划线效果2.设置菜单文字对齐text-right样式：右对齐text-center:居中text-left(默认)：左对齐3.带标题的菜单dropdown-header样式：设置标题样式，并且鼠标不可点击disabled样式：显示禁用标识和效果，但点击还是能够触发事件的，需要配合JS来实现彻底的禁用...

2018-12-13 20:38:59 1548

原创 AngularJS-第一个程序(初步介绍搭建Module、Controller和Scope)

AngularJS核心2.1 Hello AngularJS一个构建动态Web应用程序的结构化框架。基于JavaScript的MVC框架。主要作用：简化复杂Web应用的开发难度 MVC程序架构，解耦应用逻辑、数据模型和视图数据绑定依赖注入 Ajax服务提高应用程序的可测试性、可维护性擅长领域：单页面应用程序Single Page Applicat...

2018-12-11 15:53:02 798

原创 BootStrap-CSS样式_排版_响应式布局(各种大中小超小设备和打印机显示隐藏样式)

响应实用工具目前只适用于块或表切换大中小超小设备显示隐藏类打印类大中小超小设备综合实例：<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatibl

2018-12-02 01:00:51 1091

原创 BootStrap-CSS样式_排版_辅助类(颜色浮动居中显示隐藏转义字符)

CSS样式辅助类:pull-left样式:左浮动pull-right样式:右浮动center-block样式：设置居中，单纯看上去是没有没居中的，因为块宽度默认100%，只不过块内文字没有居中，需要单独设置style="text-align:center":设置文本居中clearfix样式：清除浮动，即清除之前块设置的浮动sr-only样式：除屏幕阅读器，其他设备上隐藏元素...

2018-12-01 23:58:33 856

原创 BootStrap-CSS样式_排版_图片

图片img类：img-rounded样式：为图片添加圆角(IE8不支持)img-circle样式：将图片变为椭圆形(IE8不支持)img-thumbnail样式：将图片变为略缩图img-responsive样式：让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果)<!DOCTYPE html><html lang="zh-cn">...

2018-12-01 22:32:42 1009

原创 BootStrap-CSS样式_排版_表单、表单控件

1. 基本表单form样式：默认不显示，基本表单form-group样式：表单内设置分组form-control样式：设置控件并绑定控件默认样式2. 内联表单form-inline样式：设置为内联排列表单3. 水平排列表单form-horizontal样式：设置为水平排列表单4. 表单支持控件type="text"：文本框textarea标签：多行文本框...

2018-12-01 19:09:41 2031

原创 BootStrap-CSS样式_排版_按钮

BootStrap按钮样式、类型、代码、显示效果按钮最好使用button类型的，以免垮浏览器或一些其他操作存在兼容性问题。1. 选项按钮btn btn-default样式：渐变标准灰色，默认按钮btn btn-primary样式：蓝色，提供额外的视觉感，可在一系列按钮中指出主要操作btn btn-success样式：浅蓝色，可作为默认样式的代替样式btn btn-info样...

2018-12-01 02:39:53 3036

原创 BootStrap-CSS样式_排版_表格

table样式:基本表格table table-striped样式:条纹表格，类似奇数偶数行table table-bordered样式:带边框表格，添加表边框table table-hover样式:鼠标悬停效果表格，添加鼠标移入移出事件样式table table-condensed样式:紧缩型表格，缩小表内边距(padding减半)table active-激活状态(灰色) ...

2018-12-01 01:49:27 647

原创 BootStrap-CSS样式_排版_代码

code标签：标注代码块，标签内包裹内联样式的代码片段，呈现背景粉红色块pre标签：基本代码块，多行代码可以使用pre标签pre-scrollable样式：增加一个高度max-height:350px滚动条，当高度超过350px就可以上下滚动了&lt;&gt;：为"<"">"转义字符<!DOCTYPE html><html lang...

2018-12-01 00:15:37 279

LoveyourselfJiuhao的博客