随笔分类 -  bootstrap

第 13章模态框插件
摘要：本节课我们主要学习一下 Bootstrap 中的模态框插件，这是一款交互式网站非常常见的 弹窗功能插件。 一．基本使用 使用模态框的弹窗组件需要三层 div 容器元素，分别为 modal(模态声明层)、 dialog(窗口声明层)、content(内容层)。在内容层里面，还有三层，分别为 header(头 部)、body(主体)、footer(注脚)。 //基本实例 &time... 阅读全文
posted @ 2016-09-07 15:04 Cutelady 阅读(207) 评论(0) 推荐(0)
第 12章 列表组面板和嵌入组件
摘要：本节课我们主要学习一下 Bootstrap 的三个组件功能：列表组组件、面板组件、 响应 式嵌入组件。 一．列表组组件 列表组组件用于显示一组列表的组件。 //基本实例 1.这是起始 2.这是第二条数据 3.这是第三排信息 4.这是末尾 //列表项带勋章 1.这是起始 10 //链接和首选 1.这是起始 10 2.这是第二条数据 3.这是第三排信息 4.这是末尾 //按钮式列表 1.这... 阅读全文
posted @ 2016-09-07 13:47 Cutelady 阅读(231) 评论(0) 推荐(0)
第 11 章 进度条媒体对象和 Well 组件
摘要：本节课我们主要学习一下 Bootstrap 的三个组件功能：Well 组件、进度条组件、媒体对 象组件。 一．Well 组件 这个组件可以实现简单的嵌入效果。 //嵌入效果 Bootstrap //有 lg 和 sm 两种可选值 Bootstrap 二．进度条组件 进度条组件为当前工作流程或动作提供时时反馈。 //基本进度条 60% //最低值进度条 0% //结合情景的进度条... 阅读全文
posted @ 2016-09-07 13:44 Cutelady 阅读(132) 评论(0) 推荐(0)
第10章 巨幕页头缩略图和警告框组件
摘要：本节课我们主要学习一下 Bootstrap 的四个组件功能：巨幕组件、页头组件、缩略图组件和警告框组件。一．巨幕组件巨幕组件主要是展示网站的关键性区域。//在固定的范围内，有圆角<div class="container"><div class="jumbotron"><h2>网站标题</h2><p 阅读全文
posted @ 2016-09-02 10:16 Cutelady 阅读(118) 评论(0) 推荐(0)
第9章 路径分页标签和徽章组件
摘要：本节课我们主要学习一下 Bootstrap 的四个组件功能：路径组件、分页组件、标签组件 和徽章组件。 一．路径组件 路径组件也叫做面包屑导航。 //面包屑导航 首页 产品列表 韩版 2015 年羊绒毛衣 二．分页组件 分页组件可以提供带有展示页面的功能。 //默认分页 &laquo; 1 2 3 4 5 &raquo; //首选项和禁用 1 2 //设置尺寸，四种 lg、默认、sm 和... 阅读全文
posted @ 2016-09-02 10:04 Cutelady 阅读(148) 评论(0) 推荐(0)
第8章 输入框和导航组件
摘要：本节课我们主要学习一下Bootstrap的两个个组件功能：输入框组件和导航导航条组件。 一．输入框组件 文本输入框就是可以在元素前后加上文字或按钮，可以实现对表单控件的扩 展。 //在左侧添加文字 @ //在右侧添加文字 @163.com //在两侧添加文字 $ .00 //设置尺寸，另外三种分别是默认、xs、sm //左侧使用复选框和单选框 //左侧使用按钮... 阅读全文
posted @ 2016-09-01 16:50 Cutelady 阅读(186) 评论(0) 推荐(0)
第7章 图标菜单和按钮组件
摘要：本节课我们主要学习一下 Bootstrap 的三个组件功能：小图标组件、下拉菜单组件和各 种按钮组件。 一．小图标组件 Bootstrap 提供了免费的 263 个小图标（数了两次），具体可以参考中文官网的组件 链接：http://v3.bootcss.com/components/#glyphicons。部分图标如下： 部分图标 可以使用或标签来配合使用，具体如下： //使用小图标 //也... 阅读全文
posted @ 2016-09-01 16:45 Cutelady 阅读(198) 评论(0) 推荐(0)
第6章 辅助类和响应式工具
摘要：本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具，辅助类提供了一组类来辅 组页面设计，而响应式工具则利用媒体查询显示或隐藏某些内容 。 一．辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、 显示关闭图标等等。 1.情景文本颜色 样式列表 样式名 描述 text-muted 柔和灰 text-primary 主要蓝 text-succe... 阅读全文
posted @ 2016-09-01 14:11 Cutelady 阅读(180) 评论(0) 推荐(0)
第5章 栅格系统
摘要：本节课我们主要学习一下 Bootstrap 的栅格系统， 提供了一套响应式、移动设备优先的流 式栅格系统。 一．移动设备优先 在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏 幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。 //分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放 二．布局容器 Bootstrap 需要为页面内容和栅... 阅读全文
posted @ 2016-09-01 13:42 Cutelady 阅读(257) 评论(0) 推荐(0)
第4章 表单和图片
摘要：本节课我们主要学习一下 Bootstrap 表单和图片功能，通过内置的 CSS 定义，显示各 种丰富的效果。 一．表单 Bootstrap 提供了一些丰富的表单样式供开发者使用。 1. 基本格式 //实现基本的表单样式 电子邮件 密码 注：只有正确设置了输入框的 type 类型，才能被赋予正确的样式。支持的输入框控件 包括：text、password、datetime、datet... 阅读全文
posted @ 2016-09-01 11:46 Cutelady 阅读(155) 评论(0) 推荐(0)
第 3 表格和按钮
摘要：本节课我们主要学习一下 Bootstrap 表格和按钮功能，通过内置的 CSS 定义，显示各 种丰富的效果。 一．表格 Bootstrap 提供了一些丰富的表格样式供开发者使用。 1. 基本格式 //实现基本的表格样式 注：我们可以通过 Firebug 查看相应的 CSS。 2. 条纹状表格 //让里的行产生一行隔一行加单色背景效果 注：表格效果需要基于基本格式.table 3. 带边框的表... 阅读全文
posted @ 2016-09-01 11:28 Cutelady 阅读(170) 评论(0) 推荐(0)
第2章 排版样式
摘要：本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式，包括了标题、页面 主体、对齐、列表等常规内容。 一．页面排版 Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。 1. 页面主体 Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即 20px)；段落元素被设置等于 1/2 行高(即 10... 阅读全文
posted @ 2016-09-01 10:22 Cutelady 阅读(198) 评论(0) 推荐(0)
第1章 Bootstrap介绍
摘要：学习网址：http://www.bootcss.com/ 下载网址：http://v3.bootcss.com/ 下载后一共三个文件夹 css js fonts 引入的文件 阅读全文
posted @ 2016-09-01 10:04 Cutelady 阅读(225) 评论(0) 推荐(0)