4.网格系统、下拉菜单

网格系统

1. 实现原理（栅格系统）

通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。

2. 工作原理
1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12
3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响

3. 基本用法
1、列组合
即更改数字来合并列（但不能超过12列，超过会掉下来）。
2、列偏移(下面的md可以替换的)
不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。
用法：在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)
　注意：要保证列与偏移列的总数不超过12，不然会致列断行显示
3、列排序
通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)来改变左右浮动。
另：列偏移和列排序不同点： a.超过12列时，列偏移会断行，列排序则不会 b.列偏移不能向左偏
4. 列的嵌套

在列里面嵌套行。此时的行容器宽度为外部列宽。同样，嵌套列总数也不能超过12列。

下拉菜单

1. 下拉菜单（基本用法）
在Bootstrap框架中的下拉菜单组件是一个独立的组件,使用时，必须调用Bootstrap框架提供的bootstrap.js文件。
使用方法：
1、使用一个名为“dropdown”的容器，或者另一个声明了 position: relative; 的元素包裹了整个下拉菜单元素。
2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，当外部容器是类名为“.dropdown"时，其值必须和最外容器类名一致。
3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”。

特别声明：因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。

 <div class="dropdown"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown">选择你需要的类<span class="caret"></span>         </button><ul class="dropdown-menu"><li><a href="javascript:;">生活类</a></li><li><a href="javascript:;">教育类</a></li><li><a href="javascript:;">娱乐类</a></li><li><a href="javascript:;">影视类</a></li></ul></div>

2. 下拉菜单（原理分析）
默认情况下，拉菜单项(.dropdown-menu)默认是隐藏的。
当点击父菜单时，会给“div.dropdown”添加类名“open”，使下拉菜单显示。再次点击时，则删除类名"open"，下拉菜单隐藏。

<!-- 查看源码 -->.open > .dropdown-menu {display: block;
}

3. 下拉菜单（下拉分隔线）
在组与组之间可以通过添加一个空的<li>，并给它加类名".divider" 即可实现。

4. 下拉菜单（菜单标题）
.dropdown-header 给li加上这个样式即可

5. 下拉菜单（对齐方式）
Bootstrap框架中下拉菜单默认是左对齐，要右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名实现。
顺序复习下css中定位的用法：
绝对定位：
   1.它会优先找自己父级元素中是否有定位的元素，比如absolute/fixed/relative/inherit，只要设了position是static以外的就都会以有定位的父级来进行绝对定位。
   2.当所有父级都没有定位时，（即为默认的static时），它就会相对于body进行绝对定位。
   3.它不会影响到当其它元素的位置，但当位置有重叠时，会霸道的覆盖别的元素。
相对定位：
   1. 生成相对定位的元素，相对于其自己在文档中的初始位置进行定位。
   2.原来的位置仍会继续保留。

注意：position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设置display:inline; display:block都是无效的。

6. 下拉菜单（菜单项状态）
默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）。
另外还可设置当前状态（.active）和禁用状态（.disabled），使用时需要在对应菜单项li上添加类名。

7.按钮（按钮组）
按钮组也是一个独立的组件，所以有要引入bootstrap.js文件。
使用时，用一个类名“btn-group”的容器把所有按钮包裹起来，按钮可以用button，也可以用a标签等制件的按钮。
圆角实现原理：
当有一组按钮时，只有边上两个有圆角，其它的都取消圆角了。详情见源码。

8.按钮（按钮工具栏）
   将按钮组分组排列在一起，比如Word文档的工具栏。
使用：
   将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中。
实现原理：主要是让容器的多个分组“btn-group”元素进行浮动，（此时，btn-toolbar要清除浮动）并且组与组之前保持5px的左外距。
大小设置：（在“.btn-group”类名上追加对应的类名）
   .btn-group-lg:大按钮组
   .btn-group-sm:小按钮组
   .btn-group-xs:超小按钮组

顺便复习下浮动：
   1. 浮动后就是脱离了原来的文档流（即浮于文档流之上），其他元素会向上移动占据浮动元素原来位置。
   2.假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置(即踫到它所在行边缘或元素时会停止下来)不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
取值：
       none : 默认值。允许两边都可以有浮动对象
       left   : 不允许左边有浮动对象
       right : 不允许右边有浮动对象
       both : 不允许有浮动对象
   注意：对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
   例：有两个浮动元素div1,div2，div2跟在div1屁股后面。如果想div2浮动到下一行时，不应该是给div1加{ clear:right}，而是应该给div2加{ clear:left}才能实现。

9.按钮（嵌套分组）
通过把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。
使用：
只需要把当初制作下拉菜单的“dropdown”的容器换成“ btn-group”，并且和普通的按钮放在同一级。

 <div class="btn-group"><button type="button" class="btn btn-primary">菜单一</button><div class="btn-group"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown">菜单二<span class="caret"></span></button><ul class="dropdown-menu"><li class="active"><a href="#">下拉一</a></li><li><a href="#">下拉二</a></li><li class="divider"></li><li><a href="#">下拉三</a></li></ul></div></div>

10.按钮（垂直分组）
用法：只需要把水平分组的“btn-group”类名换成“ btn-group-vertical”即可。
区别：同水平分组不同的是，第一个和最后一个按钮的圆角方向不同。
此时，若想下拉菜单显示在右边可以更改ul的样式。 .dropdown-menu{ left:100%;top:0; }

11.按钮（等分按钮） (自适应分组按钮)
用法：只需要在按钮组“btn-group”上追加一个“ btn-group-justified”类名即可。
原理：上面这个样式有一条： display:table 即模拟成表格，按钮则成了单元格了。
特别声明：在制作等分按钮组时，请 尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好。

12.按钮下拉菜单
跟普通下拉菜单类似，唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。

13.按钮的向下向上三角形
按钮的向下三角形，我们是通过在<button>标签中添加一个“<span>”标签元素，并且命名为“caret”。
当要向上时，则需在.btn-group的容器上新增类 ".dropup"

14.向上弹起的下拉菜单
实现方法同13节一样。

4.网格系统、下拉菜单相关推荐

bootstrap网格系统，下拉菜单
网格系统实现原理把网页大小分为12份,仅仅通过定义容器大小,平分12份,再调整内外边距,最后结合媒体查询,就可以制作出响应式栅格系统栅格系统用于一系列的含(row)和列(column)的组合来创建 ...
CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单
水平&垂直对齐元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
bootstrap:按钮，下拉菜单
'btn':加按钮样式 btn-small btn-large:调整按钮大小 btn-primary....:调整按钮风格 btn-group:声明这是一个按钮组 <span class='ca ...
popwindow下拉筛选二级联动_职场人必备！一分钟搞定Excel二级联动下拉菜单
对于一级下拉菜单的设置,相信经常使用Excel的用户都不陌生,那么,二级联动下拉菜单又是什么呢?与一级下拉菜单有什么关系呢? 二级联动下拉菜单是根据一级下拉菜单内容的变化而变化的.大家都知道,不同的部 ...
在做会员资料修改时,实现下拉菜单的默认项定位
作者:lshdic http://blog.csdn.net/lshdic/ <!--在写一个交友网站时碰到的问题,就是当会员修改资料时,如何定位SELECT的菜单列默认项,不过很容易就解决 ...
iOS 多级下拉菜单
前言 App 常用控件 -- 多级下拉菜单, 如团购类, 房屋类, 对数据进行筛选. 有一级, 二级, 三级, 再多就不会以这种样式,呈现给用户了. 作者就简单聊一下多级下拉菜单二级下拉筛选菜单. ...
纯CSS实现蓝色圆角下拉菜单
代码简介: 这个菜单没有使用任何的图片,完全是用CSS实现的,包括圆角效果也同样是,而且还考虑了多浏览器的兼容性,可以说非常不错,既兼容性好,又外观漂亮,下拉导航菜单目前比较流行,好好感觉一下本款菜单 ...
下拉菜单被挡住了，DIV置于最底层的方法
网站常会用到一些下拉菜单,,幻灯片,,,飘浮广告等. 但经常会发现.幻灯片会挡住下拉菜单或者飘浮广告等.解决办法有下第一,可将幻灯片所在DIV 置于最底层.添加CSS如下 style=" ...
Delphi访问网页中的下拉菜单
Delphi通过TWebBrowser浏览网页,然后访问该网页中的下拉菜单: uses MsHtml; procedure TForm1.Button1Click(Sender: TObject); ...

4.网格系统、下拉菜单

4.网格系统、下拉菜单相关推荐

最新文章

热门文章