front-end(bootstrap)
文章平均质量分 77
小巷下起了雨
最求卓越,成功就会找上你!
展开
-
Bootstrap css学习笔记(四)——图片与辅助类
前言:这篇文章就写目录了,这篇是bootstrap css最后一篇文章,将对bootstrap中对图片的处理和一些辅助类的设计进行学习了解。1.图片辅助类学习总结2.示例代码 如下:12html>原创 2017-08-17 23:28:14 · 1318 阅读 · 0 评论 -
Bootstrap插件(一)——模态框(modal.js)
前言:这一片文章我们将对bootstrap的modal模态框进行学习,学习他是如何绑定到一个按钮上去点击显示,学习模态框的简单数据配置,学习模态框的使用方式,事件,方法、参数等;下面是modal的内容总结。目录: 1.模态框的大小以及动画效果禁用 2.通过button传递内容给绑定的modal 3.模态框的调原创 2017-09-07 21:59:43 · 19498 阅读 · 0 评论 -
Bootstrap插件(四)——工具提示(tooltip.js)
工具提示的应用场景是某些内容的辅助提示,在元素被点击或者获取焦点是提示用户。都是比较简单是使用,我依然直接用一个例子来进行学习。依然是先看实现的效果,效果图如下: 代码实现如下:1DOCTYPE html>2html>3原创 2017-09-15 21:38:21 · 5417 阅读 · 0 评论 -
Bootstrap组件学习笔记(六)——页头、缩略图和警告框
目录: 1.页头 2.缩略图 3.警告框 都比较简单,就是直接上示例,强强代码熟悉一下即可。1.页头 1.1效果截图 1.2 代码示例12html>3head lang="en">4 meta charset="UTF-8">5原创 2017-08-30 23:37:38 · 418 阅读 · 0 评论 -
Bootstrap组件学习笔记(六)——进度条和媒体对象
目录: 1.进度条 2.媒体对象1.进度条 1.1 总结 1.2 示例效果图 1.3 示例代码12html>3head lang="en">4 meta charset="UTF-8">5 title>组件title>6 7 li原创 2017-08-31 23:34:46 · 550 阅读 · 0 评论 -
Bootstrap插件(五)——弹出框(popover.js)
其实popover.js插件和tooltip.js类似,都有附加说明的作用,而popover比起tooltip显示的提示内容更多一些,我们还是通过一个简单的代码示例对popover进行学习。示例效果图如下:示例代码:1DOCTYPE html>原创 2017-09-18 21:16:15 · 3638 阅读 · 0 评论 -
Bootstrap插件(六)——警告框(alert.js)
bootstrap中的alert和原本的alert弹框可不太一样,原来我们熟悉的弹框是在执行某个动作的时候,浏览器和我们弹出来的一个提示框,比如下面这样: 而我们这里的警告框是在html内容之间的提示内容,只是他有着醒目的颜色,以此来达到提醒用户的目的,就像下面这样: ok,不用啰嗦,alert的使用也比较简单,我还是像往常一样通过一个简单的代码示例来学习他的使用方原创 2017-09-18 21:50:59 · 15509 阅读 · 0 评论 -
Bootstrap插件(八)——轮播(Carousel.js)
这一篇我们来学习一下bootstrap的轮播插件Carousel.js,我相信大家对于轮播已经熟悉的不能再熟悉了,基本上我们任意打开一个网站都会有轮播的元素。在以前需要我们通过js css html自己写,但是对于初学者来说还是比较难得人一件事,但是bootstrap为我们封装好了一个插件,只要简单的classl配置就能简单的实现轮播。OK接下来依然是先来看看我们的示例效果: 来看原创 2017-09-26 21:46:00 · 8393 阅读 · 0 评论 -
Bootstrap组件学习笔记(七)——列表组和面板
目录: 1. 列表组 2. 面板1.列表组 1.1 总结 1.2 示例效果截图 1.3 示例代码12html>3head lang="en">4 meta charset="UTF-8">5 title>原创 2017-09-01 23:35:46 · 951 阅读 · 0 评论 -
Bootstrap插件(二)——滚动监听(scrollspy.js)
滚动监听就不细致的将他的方法属性或者事件之类的了,我们实现一个根据滑动位置动态改变导航选中选项和根据不同的导航菜单选中跳转到相应的位置的案例先上效果图:接下来是实现代码,代码的 实现和关键点在代码中有注释1DOCTYPE htm原创 2017-09-12 23:32:51 · 3070 阅读 · 0 评论 -
Bootstrap组件学习笔记(五)——标签、徽章和巨幕
前言: 这一篇学习的内容比较简单,就省去目录了,直接撸一个示例。1.示例效果图 2.示例代码12html>3head lang="en">4原创 2017-08-29 23:04:37 · 752 阅读 · 0 评论 -
Bootstrap组件学习笔记(四)——分页和翻页
目录: 1.bootstrap分页 2 bootstrap标签1.bootstrap分页 1.1 总结 1.2 代码示例12html>3head lang="en">4 meta charset="UTF-8">5 title>组件title>6 7 link hr原创 2017-08-28 23:47:34 · 3386 阅读 · 0 评论 -
Bootstrap插件(三)——标签页导航(tab.js)
之前讲组件的时候有讲到tab普通式和胶囊式标签页,但是都只是讲解一些静态的布局,并没有加入动态的交互效果,这一篇文章将根据一个代码示例来学习,标签导航与所对应内容的联动。想来看一下具体实现的动态效果: 效果就像上面,当点击tab选项的时候切换 对应的内容,下面是实现的代码:原创 2017-09-14 21:15:27 · 7633 阅读 · 3 评论 -
Bootstrap css学习笔记(一)——大纲与排版
目录: 1. bootstrap css内容大纲 2. 排版1. bootstrap css内容大纲 概述:在bootstrap中对我们常规的元素进行了一些简单的css样式的设置,这篇文章在于简单的学习bootstrap 这些简单的css样式。 bootstrap css主要内容原创 2017-08-10 22:35:55 · 1298 阅读 · 0 评论 -
Bootstrap css学习笔记(二)——代码与表格
目录: 1.代码 2.表格前言:前面学习笔记一中我们已经对bootstrap css的内容进行了总结并且对“排版”进行简单的学习和使用,接下来我们将学习bootstrap在代码、表格和表单上做的一些改变。1.代码 1.1 总结 1.2 代码效果图:原创 2017-08-13 00:00:26 · 530 阅读 · 0 评论 -
Bootstrap的栅格化系统
目录: 1.Bootstrap栅格化系统 1.1 描述 1.2 代码示例 1.3 媒体查询 2.Bootstrap基本css样式的使用1.Bootstrap栅格化系统 1.1 描述 bootstrap栅格化系统可以根据设备视口的大小变化去适当扩展到最多12列的原创 2017-08-09 21:49:24 · 5109 阅读 · 0 评论 -
Bootstrap初识
目录: 1.概述 2.bootstrap的优势 3.bootstrap包含的内容 4.bbootstrap的安装与引入 1.概述 bootstrap是一个由witter开源的基于HTML、CSS、JS的快速开发web网站的前端框架。2.bootstrap的优势原创 2017-08-06 17:27:28 · 366 阅读 · 0 评论 -
Bootstrap组件学习笔记(三)——导航
目录: 1.标签页导航 2.导航条 3.路径导航(面包屑导航)1.标签页导航 1.1 总结 1.2 示例效果 截图 1.3 示例代码12html>3head lang="en">4 meta charset="UTF-8">5 title>组件原创 2017-08-24 23:34:22 · 400 阅读 · 0 评论 -
Bootstrap组件学习笔记(一)——大纲、Glyphicons字体图标和下拉菜单
目录: 1.组件学习大纲 2.Glyphicons字体图标 3.下拉菜单1.组件学习大纲 2.Glyphicons字体图标 bootstrap含有接近250多个字体图标(图标表格地址:http://v3.bootcss.com/components/#glyphic原创 2017-08-21 23:05:53 · 670 阅读 · 0 评论 -
Bootstrap组件学习笔记(八)——具有响应式的嵌入内容和well
组件最后一篇就不写目录了,都比较简单,我们下来讲讲什么是具有响应式的情如内容。 所谓响应式嵌入式内容就是根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例,从而让浏览器自动确定视频或 slideshow(幻灯片) 的尺寸,能够在各种设备上缩放。简单讲就是确定视频或者幻灯片的长宽比,然后浏览器根据更具不同的设备进行等比例缩放。 我们先来看一原创 2017-09-04 22:32:32 · 1299 阅读 · 0 评论 -
Bootstrap css学习笔记(三)——表单与按钮
目录: 1.bootstrap表单 2.bootstrap按钮 前言:前面我们已经对bootstrap的栅格化系统、表格、排版以及代码这些css样式进行了简单的学习,接下来这篇文章将继续学习bootstrap表单和按钮。1.bootstrap表单 1.1 总结原创 2017-08-16 00:19:21 · 465 阅读 · 0 评论 -
Bootstrap组件学习笔记(二)——按钮组和输入框组
目录 1.按钮组 2.输入框组1.按钮组 1.1 总结 1.2 示例代码1html>2html>3head lang="en">4 meta charset="UTF-8">5 title>组件title>6 7 link href="css/bootstr原创 2017-08-23 21:04:51 · 2298 阅读 · 0 评论 -
Bootstrap插件(七)——按钮(button.js)与collapse(collapse.js)
1.按钮(button.js) button.js主要是运用选中状态来实现toggle状态以及和CheckBox、radio的组合使用,使用都相对简单,我们来看看通过选中状态去实现的toggle状态效果: 下面贴出上面效果的示例代码:1DOCTYPE html>2html>3head lang="en">4 meta cha原创 2017-09-21 22:10:17 · 2707 阅读 · 0 评论