bootstrap初用新得2
##具体实现
1. 宽度无限的背景和始终居中的主题内容:
首先是背景要用一个div1来做out-background,然后div1的兄弟元素div2来做container。对out-background进行决对定位,对container进行相对定位,并且margin:auto。这样container就会居中在body中并且在out-background的上面。out-background可以设置几个不同高度的子元素,这样,就可以为container里的不同的行做背景了。————其实,完全跟container内容无关也无所谓,不设置container的背景,它就是透明的!
2. 导航框:导航栏和logo的组合
* 首先导航框一般都和搜索框共同存在header当中,有时他们会在一行中。用bootstrap的分列都不用自己去浮动就可以很好地区隔开导航栏。
* 导航框中一般logo和导航栏会分在一起,如果用前景图当logo比较麻烦,直接让导航条们右浮动,然后在左边空白处加上一个背景图片就是。
3. 对12列布局的理解
* container的宽指定了就不能进行响应式布局。指定了之后,我们每一行的width就会是这个值。
* 行和列的宽度方向上的所有属性都不能去设置。因为它们划定的就是一个表格。
* 行可以为它指定padding-top、bottom,以及height,但要注意的是,如果指定了height,就应该指定成准确值,因为指定了值之后height就无法自适应内容调整,内容有可能会穿出行。
4. 不断降低耦合性:
* 一个元素的复合属性会覆盖单一属性,所以尽量避免对一个元素分在不同的选择器里进行多次设置。如有需要,也应该将单一属性放在复合属性之后设置。或者不使用单一属性。
* 在一个区域内,尽量父元素框定内容区大小,子元素进行padding调整位置。或者直接父元素直接设置出padding和内容区大小。避免都在设置padding和大小的问题。
5. 主要用padding而不是margin:
* 原因:margin一是存在兼容性的问题,比如IE6的双倍左边距。二是margin需要考虑太多问题,不能够孤立地进行使用:绑架父元素上下边距,垂直方向重叠,水平方向存在自动调整等问题……而padding不会存在与其它元素互相作用的问题。
* 使用padding需要改变一种思维,即:
元素与元素之间是不存在距离的,他们是紧靠着的!我们看到的距离是他们之间的内容的距离,而不是元素的距离!
要改变思维,不要把元素单纯看成一个框,然后和其他元素相距多少。因为教学演示一般都是用一个一个色块,但真实的网页中,嵌套关系要深得多。
* 把一个元素看成padding和content两部分。避免把border和margin也带入进来,因为不能简单化问题就很容易出现错误。耦合太多综合考虑的东西就太绕。
bootstrap初用新得2的更多相关文章
- bootstrap初用新得1
## 基本准备 1. 首先把相关软件窗口规划好,对于我的喜好,我喜欢把除了浏览器外的其他软件分为左右两个半屏.左边和右边很多软件之间是需要配合使用的: * 左边: scss文件,ps的guid ...
- bootstrap初接触
Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架.(主要是结合HTML5 CSS3的样式, 基于jquery+Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以 ...
- 坚持自学的第二天,bootstrap初入门
前言 昨天,初步学完了jekyll目录结构与Liquid语法的应用与认识. 日志 今天刚入门,做了一个bootstrap导航栏,但是选中状态不行,找了JS中写好的API,写法与视频中讲的有点不一样,但 ...
- 学生管理之Bootstrap初体验
Bootstrap,来自 Twitter,是目前比较受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstra ...
- 旺财速啃H5框架之Bootstrap(一)
接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...
- H5框架之Bootstrap(一)
H5框架之Bootstrap(一) 接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了 ...
- 12 个 Web 设计师必备的 Bootstrap 工具
转自:http://www.oschina.net/translate/12-best-bootstrap-tools-for-web-designers Bootstrap是一个非常棒的前端网站开发 ...
- 最值得拥有的免费Bootstrap后台管理模板
在PHP开发项目中,后台管理因为面向群体相对比较固定,大部分以实现业务逻辑和功能.使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台,节约前端开发的时间.下面PHP程序员 ...
- Bootstrap学习笔记(3)--菜鸟网CDN
Bootstrap CDN 推荐 本站实例采用的是自建的静态资源库上的Bootstrap资源. <!-- 新 Bootstrap 核心 CSS 文件 --> <link href=& ...
随机推荐
- [置顶]
来自 Google 的高可用架构理念与实践
转自: https://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=402738153&idx=1&sn=af5e76aad ...
- C#第十四节课
函数的调用 using System;using System.Collections.Generic;using System.Linq;using System.Text;using System ...
- python-if判断
1. python 条件语句 Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: Python程序语言指定任何 ...
- jQuery Webcam Plugin jscam.swf文件反编译工具使用说明
jQuery webcam plugin是一个在ie,firefox,chrome下都可以用的摄像头摄像及拍照用的插件. (http://www.xarg.org/project/jquery-web ...
- lunix下的redis数据库操作——set集合
创建:(集合的特点是:有序,无重复) sadd set 1 2 3 4 5 6 查看: smembers set 删除元素: srem set 3 # 还剩 1 2 4 5 6 移动: sadd se ...
- 元素类型为 "session-factory" 的内容必须匹配 "(property*,mapping*,(class-cach....解决方法
http://www.cnblogs.com/kisso143/p/3642057.html property必须写在mapping的上面.
- String Boot-thymeleaf使用(四)
简介 Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本.,可以完全替代jsp,也是spring boot官方推荐 ...
- Set Time, Date Timezone in Linux from Command Line or Gnome | Use ntp
https://www.garron.me/en/linux/set-time-date-timezone-ntp-linux-shell-gnome-command-line.html Set ti ...
- 完毕port模型
完毕port模型过程例如以下: 1.调用CreateIoCompletionPort函数创建完毕port. HANDLE CompletionPort=CreateIoCompletionStatus ...
- 分享一个android仿ios桌面卸载的图标抖动动画
直接上代码,如有更好的,还请不吝赐教 <span style="font-size:18px;"><?xml version="1.0" en ...