zoukankan      html  css  js  c++  java
  • bootstrap学习笔记之一

    一、概要

      bootstrap是最受欢迎的HTML、css和js框架,用于开发响应式布局,移动设备优先的WEB项目。

    二、CSS部分

      1、bootstrap已经设定了基本的全局样式,如font-family,font-size,line-height,为链接设定了基本的颜色(绿蓝色),并且当链接处于hover状态时增加下划线。

      2、两个布局容器:container和container-fluid;如下所示,container布局容器在不同的宽度的设备中宽度是不一样的,而container-fluid的宽度始终未为100%;

     1 .container {
     2   padding-right: 15px;
     3   padding-left: 15px;
     4   margin-right: auto;
     5   margin-left: auto;
     6 }
     7 @media (min- 768px) {
     8   .container {
     9      750px;
    10   }
    11 }
    12 @media (min- 992px) {
    13   .container {
    14      970px;
    15   }
    16 }
    17 @media (min- 1200px) {
    18   .container {
    19      1170px;
    20   }
    21 }
    22 .container-fluid {
    23   padding-right: 15px;
    24   padding-left: 15px;
    25   margin-right: auto;
    26   margin-left: auto;
    27 }

      由上可知,第一、栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ,即col-xs类的样式可以运用到平板和电脑上,但是如果文件中还设定了col-sm、col-md、col-lg类,则会覆盖col-xs的样式。

      第二、container类在平板和电脑端都是固定宽度的,如1170px,970px,750px,所以在平板和电脑端是不会充满全屏的,而在手机端container和container-fluid类一样是充满全屏的。因为在手机端container的宽度为自动auto了。

      第三,通过实验可以看出,container分别有左右15px的内边距,而里面的div通过row类设定margin-left:-15px,margin-right:-15px,可以实现新的row类重新得到container的宽度。而row类里边的col-md类也有默认的15px的内边距,或许大家就会疑惑,比如row类中包括两个col-md-6的div类,而且设定了border,此时他们怎么可能还在一行呢?不是撑不下了吗!没错,col-md-6的宽度都为50%,按照我们传统的想法,还设定了左右的15px的padding,还设定border,肯定是撑不下了的,原因在此。bootstrap中的所有元素box-sizing设定的是怪异模式中的border-box,而不是传统的content-box。即50%的宽度中已经包括了padding和border。

     1 * {
     2   -webkit-box-sizing: border-box;
     3      -moz-box-sizing: border-box;
     4           box-sizing: border-box;
     5 }
     6 *:before,
     7 *:after {
     8   -webkit-box-sizing: border-box;
     9      -moz-box-sizing: border-box;
    10           box-sizing: border-box;
    11 }

     3、栅格系统

     1 .row {
     2   margin-right: -15px;
     3   margin-left: -15px;
     4 }
     5 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
     6   position: relative;
     7   min-height: 1px;
     8   padding-right: 15px;
     9   padding-left: 15px;
    10 }
    11 .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    12   float: left;
    13 }
    14 .col-xs-12 {
    15    100%;
    16 }
    17 .col-xs-11 {
    18    91.66666667%;
    19 }
    20 .col-xs-10 {
    21    83.33333333%;
    22 }
    23 .col-xs-2 {
    24    16.66666667%;
    25 }
    26 .col-xs-1 {
    27    8.33333333%;
    28 }

      由上可知,栅格系统的宽度实现就是通过百分比来实现的。上面已经说过了,此时的宽度是border-box,即包括padding又包括border。

      4、偏移量的实现

    1 .col-md-offset-2 {
    2     margin-left: 16.66666667%;
    3   }
    4   .col-md-offset-1 {
    5     margin-left: 8.33333333%;
    6   }
    7   .col-md-offset-0 {
    8     margin-left: 0;
    9   }

      5、列排序的实现

     1 .col-md-push-1 {
     2     left: 8.33333333%;
     3   }
     4   .col-md-push-0 {
     5     left: auto;
     6   }
     7  .col-md-pull-1 {
     8     right: 8.33333333%;
     9   }
    10   .col-md-pull-0 {
    11     right: auto;
    12   }

      6、排版

        1)small标签在和h1~h6标签中作副标题;

        2)页面主体: font-size:14px; line-height: 1.428; p标签还设定了10px的底部外边距(margin);

        3).lead类名让段落p进行凸显;   

    1 .lead {
    2 margin-bottom: 20px;
    3 font-size: 16px;
    4 font-weight: 300;
    5 line-height: 1.4;
    6 }

        4)mark、del、s、ins、u、small、strong、em等标签;

        5)文本对齐方式类名:text-left、text-center、text-right、text-nowrap;

        6)改变英文的大小写类名:text-lowercase、text-uppercase、text-capticalize;

        7)有点不一样的abbr缩略语:

    <abbr title="attrbute">attr</abbr>

         8)引用blockquote标签,文字前面有个小标识。

         9)清除列表ul、ol的默认样式添加类名list-unstyled;内联列表添加类名:list-inline。

      7、表格table

        table,thead、tr、th,tbody、tr、td。thead中的th默认为加粗效果。

        为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线;

        通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

        添加 .table-bordered 类为表格和其中的每个单元格增加边框。

        通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

        通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的上下方向的内补(padding)会减半。

        状态类出现了:

    Class描述
    .active 鼠标悬停在行或单元格上时所设置的颜色
    .success 标识成功或积极的动作
    .info 标识普通的提示信息或动作
    .warning 标识警告或需要用户注意
    .danger 标识危险或潜在的带来负面影响的动作

        

        响应式表格:将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

      8、表单

        单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input><textarea> 和 <select> 元素都将被默认设置宽度属性为  100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

        不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。如下:

     1 <form>
     2   <div class="form-group">
     3     <label for="exampleInputEmail1">Email address</label>
     4     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
     5   </div>
     6   <div class="form-group">
     7     <label for="exampleInputPassword1">Password</label>
     8     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
     9   </div>
    10   <div class="form-group">
    11     <label for="exampleInputFile">File input</label>
    12     <input type="file" id="exampleInputFile">
    13     <p class="help-block">Example block-level help text here.</p>
    14   </div>
    15   <div class="checkbox">
    16     <label>
    17       <input type="checkbox"> Check me out
    18     </label>
    19   </div>
    20   <button type="submit" class="btn btn-default">Submit</button>
    21 </form>

         内联表单:为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。

    一定要添加 label 标签如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为label 设置 .sr-only 类将其隐藏。

     1 <form class="form-inline">
     2   <div class="form-group">
     3     <label for="exampleInputName2">Name</label>
     4     <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
     5   </div>
     6   <div class="form-group">
     7     <label for="exampleInputEmail2">Email</label>
     8     <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
     9   </div>
    10   <button type="submit" class="btn btn-default">Send invitation</button>
    11 </form>

         label的sr-only类的使用

     1 <form class="form-inline">
     2   <div class="form-group">
     3     <label class="sr-only" for="exampleInputEmail3">Email address</label>
     4     <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
     5   </div>
     6   <div class="form-group">
     7     <label class="sr-only" for="exampleInputPassword3">Password</label>
     8     <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
     9   </div>
    10   <div class="checkbox">
    11     <label>
    12       <input type="checkbox"> Remember me
    13     </label>
    14   </div>
    15   <button type="submit" class="btn btn-default">Sign in</button>
    16 </form>

        水平排列的表单:通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。此时布局要变下,要在form-group外套一个div。同时此时的lable要增加一下类名control-lable以达到理想效果。

     1 <form class="form-horizontal">
     2   <div class="form-group">
     3     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
     4     <div class="col-sm-10">
     5       <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
     6     </div>
     7   </div>
     8   <div class="form-group">
     9     <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    10     <div class="col-sm-10">
    11       <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    12     </div>
    13   </div>
    14   <div class="form-group">
    15     <div class="col-sm-offset-2 col-sm-10">
    16       <div class="checkbox">
    17         <label>
    18           <input type="checkbox"> Remember me
    19         </label>
    20       </div>
    21     </div>
    22   </div>
    23   <div class="form-group">
    24     <div class="col-sm-offset-2 col-sm-10">
    25       <button type="submit" class="btn btn-default">Sign in</button>
    26     </div>
    27   </div>
    28 </form>

       被支持的控件:包括大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件:textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtel 和 color。  

        静态控件

         如果需要在表单中将一行纯文本和 label 元素放置于同一行,为 <p> 元素添加 .form-control-static 类即可。

     1 <form class="form-horizontal">
     2   <div class="form-group">
     3     <label class="col-sm-2 control-label">Email</label>
     4     <div class="col-sm-10">
     5       <p class="form-control-static">email@example.com</p>
     6     </div>
     7   </div>
     8   <div class="form-group">
     9     <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    10     <div class="col-sm-10">
    11       <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    12     </div>
    13   </div>
    14 </form> 

          控件大小:

          通过 .input-lg 类似的类可以为控件设置高度,通过 .col-lg-* 类似的类可以为控件设置宽度。

        调整高度:

    1 <input class="form-control input-lg" type="text" placeholder=".input-lg">
    2 <input class="form-control" type="text" placeholder="Default input">
    3 <input class="form-control input-sm" type="text" placeholder=".input-sm">
    4 
    5 <select class="form-control input-lg">...</select>
    6 <select class="form-control">...</select>
    7 <select class="form-control input-sm">...</select>

        调整宽度:    

     1 <div class="row">
     2   <div class="col-xs-2">
     3     <input type="text" class="form-control" placeholder=".col-xs-2">
     4   </div>
     5   <div class="col-xs-3">
     6     <input type="text" class="form-control" placeholder=".col-xs-3">
     7   </div>
     8   <div class="col-xs-4">
     9     <input type="text" class="form-control" placeholder=".col-xs-4">
    10   </div>
    11 </div>
  • 相关阅读:
    在WCF中使用Flag Enumerations
    WCF开发教程资源收集
    [转]WCF 4 安全性和 WIF 简介
    Asp.Net Web API 2 官网菜鸟学习系列导航[持续更新中]
    Asp.Net Web API 2第十八课——Working with Entity Relations in OData
    Asp.Net Web API 2第十七课——Creating an OData Endpoint in ASP.NET Web API 2(OData终结点)
    Asp.Net Web API 2第十六课——Parameter Binding in ASP.NET Web API(参数绑定)
    Asp.Net Web API 2第十五课——Model Validation(模型验证)
    函数 生成器 生成器表达式
    函数的进阶
  • 原文地址:https://www.cnblogs.com/wbxjiayou/p/5240819.html
Copyright © 2011-2022 走看看