web前端知识点小结 （二）

html使用bootstrap实现网格布局

bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
工作原理：
1.数据行（.row）必须包含在容器（.container）中，以便其赋予合适的对齐方式和内距（padding）eg.

<div class="container">
<div class="row"></div>
</div>

2.在行（.row）中可以添加列(.column)，但列数之和不能超过平分的总列数（如12）eg.

<div class="container">
<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-8"></div>
</div>
</div>

3.具体内容应当放在列容器(.column)之内，而且只有列才可以作为容器(.row)的直接子元素
4.通过设置内距从而创建列与列之间的间距，然后通过为第一列和最后一叠设置负值的外距来抵消内距的影响,在bootstrp网格系统中带有响应式效果，其带有四种类型的浏览器（超小屏，小屏，中屏和大屏），其断点是768px,992px,1220px;容器针对不同的浏览器分辨率，其宽度也不一样：760px,970px,1170px;

用法：
由于bootstrap框架在不同屏幕尺寸使用了不同的网格样式，下面就以中屏（970px）为例。

<div class="container">
           <div class="row">
               <div class="col-md-4">col-md-4</div>
               <div class="col-md-8">col-md-8</div>
           </div>
           <div class="row">
               <div class="col-md-4">col-md-4</div>
               <div class="col-md-4">col-md-4</div>
               <div class="col-md-4">col-md-4</div>
           </div>
           <div class="row">
               <div class="col-md-3">col-md-3</div>
               <div class="col-md-6">col-md-6</div>
               <div class="col-md-3">col-md-3</div>
           </div>
       </div>

列组合就是更改数字来合并列（列总数不能超过12），有点类似于表格的colspan属性；列组合方式只涉及两个特性：浮动于宽度百分比

做屏幕适配时标签需要同时设置col-xs , col-sm , col-md , col-lg：

.col-xs- 超小屏幕 手机 (<768px)

.col-sm- 小屏幕 平板 (≥768px)

.col-md- 中等屏幕 桌面显示器 (≥992px)

.col-lg- 大屏幕 大桌面显示器 (≥1200px)

eg.

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

html中三角形指示器

<div class="test-border"></div>

.test-border {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid #ff7f50;
}

上面代码实现的三角形效果如下图所示：
css属性中少的那个border就是三角指向的方向，因此只需简单修改上述css属性即可。这里就不一一列出了。

html标签之<datalist>

<datalist>:该元素规定输入域的选项列表，规定form或者input域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项，该属性通常与input标签一起使用。如：

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

html标签之<output>**

该元素用于不同类型的输出，比如计算或脚本输出，eg：将计算结果显示在 <output> 元素:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

html导航兰添加二级菜单

表现形式：鼠标放置到导航菜单上时自动显示二级菜单
原理：列表嵌套，鼠标移到导航菜单时设置嵌套列表的style为display:block;当鼠标移开时style设置为：display:none。