当第一次接触到 position:sticky 这个属性，我就意识到之前的不少 js 场景可以用这个 css 属性去改写。譬如 网站 右侧的不少广告，滚动上去后需要 fixed，完全就是 sticky 的应用啊。今天要说的是 文章详情页 右侧的目录栏，当页面下滑的时候，它也会固定到页面顶部，之前是用 js 去监听 scroll 事件，然后根据位置进行判断，toggle fixed 的方案，出于一些原因，决定对它用 sticky 去重写。几下就写完了，去掉滚动事件监听，然后将...
Bootstrap是什么?Bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架，那么，Bootstrap如何来创建一个表单？Bootstrap 通过一些简单的 HTML 标签和扩展的类来创建出不同样式的表单，下面我们就来看看Bootstrap创建表单的方法。Bootstrap表单布局【相关视频推荐：Bootstrap教程】Bootstrap提供了下列类型的表单布局：垂直表单（默认）、内联表单、水平表单、垂直或基本表单基本的表单结构是Bootstrap自带的，个别的表单控件...
一. 概述一下理念 bootstrap基于H5开发。提倡移动先行（媒询声明是必须的），对浏览器支持面不是很广。 响应式图片：max-width:100% height:auto; 可以加上：.img-responsive类 排版方面的基本样式为： body的margin为0，背景色为白色，行间距为20/14倍 使用Normalize.css库，使各个浏览器差别最小化 居中容器container有一个最大范围。（最大左右margin为auto，和设备有关）二. 文字基础排版（全局设置）1.标题（h标记和small标记...
（转自百度经验）http://jingyan.baidu.com/article/48a42057c44fdba9242504dd.html Pure是一个简单、实用的CSS框架，鉴于目前网上对pure的资料比较少，所以我想把使用pure的一些经验介绍给大家，相信你看完本文后也会爱上pure。 Pure包含多个模块：Base(基本样式)、Grids(网格系统)、Forms(表单)、Buttons(按钮)、Tables(表格)、Menus(菜单)，本文主要介绍如何使用Grids（网格系统）。 1.获取Pure CSS。 在官网purecss.io...
说明： 这几天公司要求网站实现响应式布局，所以对响应式布局进行了相对全面的了解，并做了几个实例。 响应式布局介绍 参考： 维基百科， CSS3 @media 查询， Bootstrap中文官网， 鄙视IE， 2014年5个最流行前端框架对比， 自适应网页设计-阮一峰， 响应式网页设计， 响应式布局-百度百科， 响应式网站设计原则， 响应式布局这件小事， 响应式 Web 设计新原则...
Bootstrap三大核心内容的基础，即基础的CSS 布局语法。其包括基础排版（Typography）、代码（Code）、表 格（Tables）、表单（Forms）、按钮（Buttons）、图片 （Images）、辅助类（Helper Classes）和响应式设计 （Responsive utilities）。 本节目录： 概述 基础排版 代码 表格 表单 按钮 图像 辅助样式 概述 HTML5文档类型 由于Bootstrap使用了HTML5特定的HTML元素和CSS属性，所 以使用Bootstr...
栅格布局系统的特点： (1)所有的行必须放在容器中： .container或.container-fluid (2)分为多行(row)，一行中平均分为12列(col) (3)网页内容只能放在列(col)中，不能直接放在行(row) (4)可以在col中再嵌套row (5)col分为四大类： col-xs col-sm col-md col-lg (6)col-md-* *值可为1~12，值就为某个列的宽度( */12 ) (7)可以为一个列指定不同屏幕下的不同宽度 (8) col-lg-* 只对大PC屏幕...
1. Cardio Cardio是我最喜欢的一个轻量级模板。它几乎可以很少的修改的用于任何类型的业务。 2. Evento Evento 是一个事件引导广告模板的形状。它是设计精美和注意细节。 3. Photography Photography, 顾名思义,是一个伟大的摄影师的模板。它提供了一个美丽的方式展示你的照片和工作。 4. Flatfy 作为一个平面设计的粉丝,这是一个模板,我个人非常喜欢。它的清洁,简单,很好地...
使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标。如下图： 但是在将图标放入input输入框中，这些小图标是无法获得点击事件的； 那么问题来了，怎样让这些小图标能够获得点击事件呢？ 我也不知道，但是可以用一种迂回的方式，来间接的实现该功能。 重点来了： 在小图标的位置上，添加一个看不见的元素，元素的大...
Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。 移动设备优先策略 内容 决定什么是最重要的。 布局 优先设计更小的宽度。 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。 渐进增强 ...
我用bootstrap做自适应布局 可是当网页宽度太小了 整个网站就变形了 请问如何实现当网页宽度小于指定宽度时候 取消bootstrap的自适应布局 并且显示底部滚动条 防止网页变形 如何设置 能否给我个demo 回复讨论(解决方案) 2种办法实现，一个是css3属性media query，另外一个是js添加事件监听 .min-800{ width:800px;} 2种办法实现，一个是css3属性media que...
1. CardioCardio是我最喜欢的一个轻量级模板。它几乎可以很少的修改的用于任何类型的业务。2. EventoEvento 是一个事件引导广告模板的形状。它是设计精美和注意细节。3. PhotographyPhotography, 顾名思义,是一个伟大的摄影师的模板。它提供了一个美丽的方式展示你的照片和工作。4. Flatfy作为一个平面设计的粉丝,这是一个模板,我个人非常喜欢。它的清洁,简单,很好地利用CSS3动画。5. SolidSolid是一种多用途的模板。6. AppiAppi是...
使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标。如下图：但是在将图标放入input输入框中，这些小图标是无法获得点击事件的；那么问题来了，怎样让这些小图标能够获得点击事件呢？我也不知道，但是可以用一种迂回的方式，来间接的实现该功能。重点来了：在小图标的位置上，添加一个看不见的元素，元素的大小正好将小图标覆盖，但是没有背景颜色和边框；相当于给小...
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><link rel="stylesheet" href="dist/css/bootstrap.css"><script src="jquery-3.2.1.js"></script><script src="dist/js/bootstrap.js"></script><title>栅格布局的列偏移</title><style>.grid {border: 1px solid #696969;border-radius: 5px;background-color: lightskyblue;min-height: 30px;text-align: center;line-height: 30px;}.green {background-color: lightgreen;...
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><link rel="stylesheet" href="dist/css/bootstrap.css"><script src="jquery-3.2.1.js"></script><script src="dist/js/bootstrap.js"></script><title>栅格布局的嵌套</title><style>.grid {border: 1px solid #696969;border-radius: 5px;background-color: lightskyblue;min-height: 30px;text-align: center;line-height: 30px;}.green {background-color: lightgreen;}....