[散修弟子]JS-226|2016年04月17日的日报-技能树.IT修真院

发表于： 2016-04-17 22:49:22

3 2149

今天完成的事情：‍‍复习巩固了task9中表单控件样式的设置，在菜鸟网和慕课网学习、了解bootstrap的原理和使用方法。‍‍

明天计划的事情：‍‍继续学习bootstrap，尝试使用bootstrap重写task7.‍‍

遇到的问题：‍‍暂无‍‍

收获：‍‍1、对表单控件样式设置主要方法是将默认样式隐藏，再利用其它标签设置新的样式。‍‍

‍‍对input元素使用“opacity：0”（不透明度为0）属性将默认控件隐藏，设置隐藏时为了保障兼容性还需要使用-ms-filter："progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"和filter：alpha(opacity=0);如图：

input[type="radio"]{
    opacity: 0;
    cursor: pointer;/***使鼠标变为手指指针***/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    position: absolute;
}
input[type="radio"]+span {     /***定义新的样式代替默认样式***/
    box-sizing: border-box;
    display: inline-block;
    width: 14px;
    height: 14px;
    border: solid 1px black;
    border-radius: 7px;
}

2、初步了解了bootstrap的原理和使用方法：

bootstrap就是css的一个框架，是在一个css文件里预先定义了很多class类，再将这些类赋予各种css属性使其达到所需样式。比如：

<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>

其中“btn”和“btn-primary”就是bootstrap定义的class类，这些类的属性和值写在bootstrap的主文件里面。所以要达到效果还需要将主文件连接到html里面，其标准模板如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <title>Bootstrap的HTML标准模板</title>
    <!-- Bootstrap -->
 <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!--你自己的样式文件 -->
 <link href="css/your-style.css" rel="stylesheet">
    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>


<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>

3、了解了bootstrap的网格系统，结合媒体查询用于响应式布局‍‍，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

‍‍基本的bootstrap网格结构如下：

<div class="container">
   <div class="row">
      <div class="col-#-*"></div>
      <div class="col-#-*"></div>      
   </div>
   <div class="row">...</div></div><div class="container">

其中#的值‍‍有xs、sm、md、lg等，分别代表了不同的屏幕尺寸。在同一尺寸下设定*的值，若所有*的值加起来为12则这些个div在同一行显示，*代表所占的列数。如：‍

<div class="container">
    <h1>Hello, world!</h1>

    <div class="row">

        <div class="col-md-2"  style="background-color: #dedef8; box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
            </p>

            <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
            </p>
        </div>

        <div class="col-md-10" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB            </p>

            <p> BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB            </p>
        </div>
    </div>