摘要: 一、巨幕组件(展示网站关键性区域) 1、100%全屏,没有圆角 jumbotron > container 2、在固定的范围内,有圆角 container > jumbotron 二、页头组件(增加了上下距离,底部有灰色的条线) 三、缩略图组件(配合响应式) .thumbnail // 缩略图的cl 阅读全文
posted @ 2017-03-30 11:23 雲淡颩淸 阅读(423) 评论(0) 推荐(0) 编辑
摘要: 一、面包屑导航(路径组件) .breadcrumb // 定义面包屑导航 .active // 当前项 二、分页组件 .pagination // 定义这是一个分页 .active // 首选项 .disabled // 禁用项 设置尺寸在 ul 上(从大到小): .pagination-lg 默认 阅读全文
posted @ 2017-03-27 17:03 雲淡颩淸 阅读(292) 评论(0) 推荐(0) 编辑
摘要: 一、输入框组件 1、在 .input-group 框里 可分别左右两侧添加文字, <input> 用 .form-control 添加样式。 2、文字元素用 span.inpt-group-addon 3、尺寸大小(从大到小): input-group-lg 、默认 、xs 、sm 4、使用复选框和 阅读全文
posted @ 2017-03-27 16:58 雲淡颩淸 阅读(1514) 评论(0) 推荐(0) 编辑
摘要: 一、小图标组件 具体图标样式class名称参考官网。 可配合 <span> 或 <i> 使用 ,也可配合 <button> 使用 二、下拉菜单组件 1、下拉菜单必须有一个被点击的元素,可以是超链接,可以是图片或者button 按钮(多),按钮需要设置 data-toggle ="dropdown"  阅读全文
posted @ 2017-03-24 16:54 雲淡颩淸 阅读(4530) 评论(0) 推荐(0) 编辑
摘要: 一、辅助类 .text-muted // 情景文本,柔和灰 .text-primary // 情景文本,主要蓝 .text-success // 情景文本,成功绿 .text-info // 情景文本,信息蓝 .text-warning // 情景文本,警告黄 .text-danger // 情景文 阅读全文
posted @ 2017-03-24 11:20 雲淡颩淸 阅读(1030) 评论(0) 推荐(0) 编辑
摘要: 移动设备优先处理 //屏幕宽度和设备一直,初始缩放比例、最大缩放比例和禁止用户缩放(最好设计最小宽度为1440px) 一、布局容器 .container // 固定宽度 框为1200px 主体显示为1170px,两边15px留白 .container-fluid // 100%流体宽度,无论多大都是 阅读全文
posted @ 2017-03-22 17:00 雲淡颩淸 阅读(928) 评论(0) 推荐(0) 编辑
摘要: 一、表单的基本框架 *在 form 上设置class*.form-inline // 内联表单,左对齐浮动,表现为inline-block内联块结构 P.s.<768px,会恢复独占样式 .form-horizontal // 表单内元素保持水平排列, *在 div 上设置class* .form- 阅读全文
posted @ 2017-03-21 16:55 雲淡颩淸 阅读(316) 评论(0) 推荐(0) 编辑
摘要: 每次看每次都觉得新鲜,用起来的时候却还是习惯性的忘记其原有的东西,自己再写出来一个自己都觉得是多余的内容。所以此次决定再捋一遍,记录每个class 和标签,具体的再不断的完善更新吧,下次再用直接查笔记,就不用去官网了。哈哈(想得美(─.─|||) 一、页面排版: 1.页面主体 全局 font-siz 阅读全文
posted @ 2017-03-21 11:26 雲淡颩淸 阅读(2648) 评论(0) 推荐(0) 编辑
摘要: 最近的项目里有个需求,要求导航栏目置顶显示。首先想到的便是position:fixed 属性,但是很快就发现此处有BUG; 正常显示应该为: 当窗口缩小的时候滚动条是可以滚动的,但是导航却只能显示一般并不能随着滚动条而滚动。显示如下效果。 经过各种百度,各种试验,用JS竟然解决了。原理就是监听滚动条 阅读全文
posted @ 2017-02-13 15:56 雲淡颩淸 阅读(458) 评论(0) 推荐(0) 编辑
摘要: 一直纠结分不清该如何写兼容 CSS3样式的写法,所以特意做了个试验。 首例用 text-shadow 属性做了各个浏览器的版本比对。 现在介绍一下本人使用的浏览器的情况: IE11、 chrome 47.0.2526.80 、Firefox49.0.2、Opera 42.0、Safari5.1.7 阅读全文
posted @ 2017-01-17 15:09 雲淡颩淸 阅读(635) 评论(0) 推荐(0) 编辑