Bootstrap-个人学习笔记

Bootstrap-个人学习笔记

一、响应式网页

1、响应式网页概述：一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验。

三个特征：（1）流式布局（2）可伸缩的图片和字体（3）CSS3 Media Query

2、编写响应式网页

（1）设置viewport元标签<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

（2）避免使用绝对单位(px),用相对单位代替(%,auto,em等)

（3）使用流式定位：float

（4）图片大小实现自适应：img(max-width:100%)会随着容器的改变而改变，且不会超过图片自身原始大小，防止失真

（5）根据浏览器屏幕的特征，有选择性的执行某些css样式——css3媒体查询技术(Media Query)

3、测试响应式网页

（1）使用真实物理设备——效果可靠但任务量太大（只要手机/平板/PC在同一个局域网即可测试）

（2）使用第三方测试/模拟软件——效果有待进一步的验证

（3）使用Chrome自带的浏览器模拟器测试

优势：可以模拟常见的设备、网速、经纬度、加速度.....；不足：效果有待进一步的验证。

4、WebStorm的常用操作：

常用快捷键(Eclipse)：

 
 

   
   

    
    

   
   
   
   

    
    

     
     复制当前行：Ctrl+Alt+↓
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     向上/下移动当前行：Alt+↑/↓
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     删除当前行：Ctrl+D
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     注释当前行：Ctrl+/
    
    
   
   
 
 

ZenCoding（代码补全）：

 
 

   
   

    
    

   
   
   
   

    
    

     
     div+TAB+enter
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     div.box+TAB+enter
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     div#mybox+TAB+enter
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     div*3+TAB+enter
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     ul>li*3>a+TAB+enter
    
    
   
   
 
 

假文生成：

lorem+TAB+enter

 
 

多行编辑：

 
 

   
   

    
    

   
   
   
   

    
    

     
     Alt+左键点击  开始多行同时编辑
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     ESC           退出多行编辑模式
    
    
   
   
 
 

5、CSS3提供的Media Query技术

作用：根据客户端浏览设备的特性，有选择性的执行部分CSS

Media：指浏览网页的设备，如screen（pc/pad/phone）、print、tv、projection、屏幕阅读器...

Query：查询出当前浏览设备的特性，如类型、宽度、高度、分辨率、色深位深、方向，根据这些特性，执行特定的CSS样式。

CSS3MediaQuery有两种用法：

（1）根据媒体的特征，加载不同的外部CSS：

<link media="screen and (min-width:768px) and (max-width:990px)" rel="stylesheet" href="xx.css">
 
 

不足：客户端会不管媒体特性，请求所有的CSS文件。

（2）根据媒体的特性，执行某段CSS中的 部分内容：

 
 

   
   

    
    

   
   
   
   

    
    

     
     @media "screen and (min-width:768px) and (max-width:990px)"{
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       h1{...}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       .box{...}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

6、Twitter Bootstrap

Bootstrap(bootcss.com)是一个框架HTML/CSS/JS框架，适用于移动设备优先的响应式网页。

Bootstrap分为五部分：

（1）起步(Startup)；（2）全局CSS样式(Global CSS)；（3）组件(Component)；（4）插件(plugin)；（5）定制(Customize)

二、Bootstrap起步

1、下载Bootstrap

2、安装Bootstrap

3、网页基本模板 

(1)lang属性的两个作用：A、告诉浏览器翻译时如何确定当前网页的基础语言B、告诉读屏软件当前页面的基础发音

(2)IE浏览器的兼容性问题：X-UA-Compitable:Cross-UserAgent-Compitable，该元标签只有IE浏览器支持

<meta http-equiv="X-UA-Compitable" content="IE=edge">设置IE的兼容模式为edge——最新版，尽可能向行业标准看齐。

(3)Bootlint工具：是一个js，由Bootstrap官方提供，用于检测使用Bootstrap的页面中常见的HTML错误、class使用方面的错误——默认情况下浏览器是检查不出来的。

三、Bootstrap全局CSS样式

1、CSS Reset

*{box-sizing:border-box;}

box-sizing:content-box;/*默认值*/=margin+border+padding+width

box-sizing:border-box;/*推荐使用*/=margin+width

2、按钮

.btn{padding: ;border: ;}

.btn-default{color: ;background: ;border-color: ;}

（1）五种带有预定义样式的按钮：

.btn-danger（危险）  .btn-success（成功）  .btn-warning（警告）  .btn-info（一般信息）  .btn-primary（首选项）

（2）四种常用尺寸的按钮：

.btn-lg（大按钮）  .btn-default（默认尺寸）  .btn-sm（小按钮）  .btn-xs（超小尺寸）

（3）按钮可变为块级（block）元素：

.btn-block（块级元素）

（4）调整按钮的位置：

.pull-left{float:left;}

.pull-right{float:right;}

3、图片

.img-rounded(圆角图片)

.img-circle(圆形图片)

.img-thumbnail(缩略图片)

.img-responsive(响应式图片)

4、排版和代码

.text-danger  .text-success  .text-warning  .text-info  .text-primary

.bg-danger  .bg-success  .bg-warning  .bg-info  .bg-primary

.text-left  .text-right  .text-center  .text-justify

.text-lowercase  .text-uppercase  .text-capitalize

.list-unstyled  .list-inline

5、表格
 
 

.table

.table-bordered 带边框的表格

.table-responsive 响应式表格（注意：使用在table的父元素上，而不是table上）

.table-striped 隔行变色的表格

.table-hover 带悬停效果的表格

6、栅格布局系统

（1）Web开发中页面布局可以采用的方式：

a、使用TABLE做布局

优势：简单不易出错   不足：加载效率

b、使用DIV+CSS做布局

优势：加载速度快、灵活   不足：不易控制

c、使用Bootstrap提供的栅格布局系统

优势：加载速度快、灵活、支持响应式功能、容易控制（有行/列的概念，但使用DIV+CSS实现）

（2）栅格布局系统的特点：

a、所有的行必须放在容器中：.container或.container-fluid

b、分为多行（row），一行中平均分为12列（col）

c、网页内容只能放在列（col）中，不能直接放在行（row）

d、可以在col中再嵌套row

e、col分为四大类：col-xs  col-sm  col-md  col-lg

f、col-md-*  *值可为1~12，值就为某个列的宽度（*/12）

g、可以为一个列指定不同屏幕下的不同宽度

h、col-lg-*  只对大PC屏幕有效；

  col-md-*  对普通PC和大PC屏幕都有效；

  col-sm-*  对平板、PC、大PC屏幕都有效；

  col-xs-*  对手机、平板、PC、大PC屏幕都有效；

i、hidden-lg  当前列只在大PC屏幕下隐藏

  hidden-md  当前列只在PC屏幕下隐藏

  hidden-sm  当前列只在平板屏幕下隐藏

  hidden-xs  当前列只在手机屏幕下隐藏

j、列偏移（offset）

col-xs-offset-1~col-xs-offset-12  在lg/md/sm/xs屏幕下偏移

 col-sm-offset-1~col-sm-offset-12  在lg/md/sm屏幕下偏移

 col-md-offset-1~col-md-offset-12  在lg/md屏幕下偏移

 col-lg-offset-1~col-lg-offset-12  在lg屏幕下偏移

k、列排序 （pull/push）

用途：在一行中调整某列的位置，且不影响其他列

col-xs/sm/md/lg-pull/push-*

（3）.container的 宽度问题：

当屏幕宽度>1200px（超大PC显示器-lg）：容器宽1170px

当屏幕宽度>992px（普通PC显示器-md）：容器宽970px

当屏幕宽度>768px（平板显示器-sm）：容器宽750px

当屏幕宽度<768px（手机显示器-xs）：容器宽auto

.container-fluid的宽度：width：auto；+before+after

（4）Bootstrap布局系统中容器的特点？

a、宽度做了媒体查询

b、添加了前置和后置内容生成，可以防止子元素的越界、浮动造成的影响。

（5）如何解决父元素的第一个子元素的margin-top越界问题（常用）

a、为父元素加border-top：1px；——有副作用

b、为父元素指定padding-top：1px；——有副作用

c、为父元素指定overflow：hidden；——有副作用

d、为父元素添加前置内容生成——推荐使用

.parent:before{

   content:' ';

   display:table;

}

（6）如何解决所有的子元素浮动后父元素高度变为0，且影响后续元素（常用）

a、为父元素指定overflow：hidden；——有副作用

b、为父元素指定高度：height：1px；——有局限性

c、为父元素添加后置内容生成——推荐使用

.parent:after{

   content:' ';

   display:table;

   clear:both;

}

7、表单

Bootstrap中的表单分为三种：

（1）默认表单

 
 

   
   

    
    

   
   
   
   

    
    

     
     <form>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <div class="form-group">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <label class="control-label">
     
     </label>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <input class="form-control">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <span class="help-block">
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </form>
    
    
   
   
 
 

（2）行内表单

 
 

   
   

    
    

   
   
   
   

    
    

     
     <form class="form-inline">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <div class="form-group">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <label class="control-label">
     
     </label>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <input class="form-control">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <span class="help-block">
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </form>
    
    
   
   
 
 

（3）水平表单

 
 

   
   

    
    

   
   
   
   

    
    

     
     <form class="form-horizontal">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <div class="form-group">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <label class="control-label col-md-3">
     
     </label>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <div class="col-md-5">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <input class="form-control">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <div class="col-md-4">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <span class="help-block">
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </form>
    
    
   
   
 
 

四、组件

1、图标字体

（1）图标字体的本质不是图片，而是字体；故凡是可以使用文字的地方都可以使用不同字体

（2）glyphicon图标字体只能用于“空元素”——不包含任何内容或子元素！

如：<span class="glyphicon glyphicon-***"></span>
 
 

2、按钮组

.btn-group   水平按钮组

.btn-group-vertical   竖直按钮组

.btn-group.btn-group-justified   水平且两端对齐的按钮组

.btn-group-lg

.btn-group-sm

.btn-group-xs

3、下拉菜单

 
 

   
   

    
    

   
   
   
   

    
    

     
     <div class="dropdown">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
     
     <a data-toggle="dropdown">
     
     <span class="caret">
     
     </span>
     
     </a>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
     
     <ul class="dropdown-menu">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <li>
     
     </li>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <li class="divider">
     
     </li>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <li>
     
     </li>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
     
     </ul>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </div>
    
    
   
   
 
 

4、导航

(1)标签页式导航<ul class="nav nav-tabs"></ul>

(2)胶囊式导航<ul class="nav nav-pills"></ul>

5、导航条

响应式导航条：在PC和平板中默认要显示所有的内容；但在手机中导航条中默认只显示“LOGO/Brand”，以及一个“菜单折叠展开按钮”，只能单击折叠按钮后才显示所有的菜单项。

基础class：navbar

（1）Bootstrap中导航条的位置：

a、顶部导航条；b、底部导航条

（2）Bootstrap中导航条的颜色：

a、浅色底深色的字  navbar-default

b、深色底浅色的字  navbar-inverse

（3）Bootstrap中导航条的定位：

a、相对定位position：relative  默认值

b、固定定位position：fixed     navbar-fixed-top/bottom

（4）导航条的结构：

 
 

   
   

    
    

   
   
   
   

    
    

     
     <div class="navbar 颜色 定位">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
     
     <div class="container">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <!--导航条的头部：商标+按钮-->
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <div class="navbar-header">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <a class="navbar-brand">
     
     </a>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <button type=“button” class="navbar-toggle collapsed" data-toggle="collapse">
     
     <span class="icon-bar">
     
     </span>
     
     </button>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <!--导航条折叠菜单：菜单、按钮、搜素框、链接、文本-->
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <div class="navbar-collapse">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <ul class="nav navbar-nav">
     
     </ul>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <form class="navbar-form">
     
     </form>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <button class="navbar-btn">
     
     </button>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <span class="navbar-text">
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <a class="navbar-link navbar-text">
     
     </a>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </div>
    
    
   
   
 
 

五、插件

Bootstrap基于jQuery提供了十几个插件函数，每个插件对应一个.js文件，可以单独引用，也可以整体引用（bootstrap.js）。

1、调用上述十几个插件可以用两种格式：

（1）传统的js方式调用：$(...).dropdown(); $(...).tab(...);

（2）使用data-*扩展属性方式调用：<a data-toggle="dropdown">

2、Bootstrap提供的弹出框

（1）工具提示框（tooltip）

data-toggle=“tooltip”
 
 

（2）弹出框（popover）

data-toggle=“popover”
 
 

（3）警告框（alert）

 
 

   
   

    
    

   
   
   
   

    
    

     
     <div class="alert alert-四种颜色 alert-dismissible">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
     
     <span class="close" data-dismiss="alert">×
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
      XXXX
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </div>
    
    
   
   
 
 

（4）模态对话框（modal）

模态框定义：在父窗体中弹出一个子窗体，子窗体若不关闭，父窗体就无法获得焦点，同时父子窗体间还可以传递数据。window.alert()就是典型例子。

模态框必需的结构:

 
 

   
   

    
    

   
   
   
   

    
    

     
     <div class="modal">  
     
     <!--半透明的黑色遮罩层-->
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
     
     <div class="modal-dialog">  
     
     <!--宽/定位-->
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <div class="modal-content">  
     
     <!--边框/背景色/阴影-->
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <div class="modal-header">头部
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <div class="modal-body">主体
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <div class="modal-footer">尾部
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </div>
    
    
   
   
 
 

显示一个模态框：

 
 

   
   

    
    

   
   
   
   

    
    

     
     （1）
     
     <a href="#模态框ID" data-toggle="modal">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     （2）
     
     <button data-toggle="modal" data-target="#模态框ID">
    
    
   
   
 
 

3、折叠效果（collapse）

（1）触发一个折叠效果：

 
 

   
   

    
    

   
   
   
   

    
    

     
     a、
     
     <a href="#折叠元素ID" data-toggle="collapse">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     b、
     
     <button data-toggle="collapse" data-target="#折叠元素ID">
    
    
   
   
 
 

<div id="折叠元素ID" class="collapse in"></div>

（2）折叠组件的两个扩展用途：

 
 

   
   

    
    

   
   
   
   

    
    

     
     a、Accordion（手风琴）
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     b、响应式导航条在手机屏幕中的效果
    
    
   
   
 
 

4、轮播广告（carousel）

 
 

   
   

    
    

   
   
   
   

    
    

     
     <div class="carousel">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
     
     <div class="carousel-inner">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     <div class="item active">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
   
     
     <img>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
  
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </div>
    
    
   
   
 
 

5、附加导航（Affix）

 
 

   
   

    
    

   
   
   
   

    
    

     
     <div data-spy="affix" data-offset-top="100">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
     
     <ul class="nav nav-pills">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </div>
    
    
   
   
 
 

6、滚动监听（scrollspy）

随着页面内容的滚动，某个导航中的项目，会自动的更改.active位置。

实现思路：

（1）页面中必须首先有一个导航菜单（.nav）——其中可以定义一个菜单项为.active

（2）导航菜单中的超链接的href属性值必须和页面中的某个锚点名一样

（3）为页面添加滚动事件的监听函数

 
 

   
   

    
    

   
   
   
   

    
    

     
     body.οnscrοll=function(){
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       if(body滚动的距离===某个锚点距离顶端的距离){
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         此锚点对应的超链接的父元素li添加.active； 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

六、Bootstrap样式定制

1、Bootstrap如何样式定制

（1）编写自定义的CSS，覆盖bootstrap.css中提供的样式；不足：产生大量的冗余/无用代码

（2）直接修改bootstrap.css文件；不足：任务量太大!——CSS通病

（3）修改Bootstrap开发者编写的Bootstrap源代码——bootstrap.less；不足：没有

2、动态样式语言

CSS:静态样式语言，作为一门语言并不称职！缺少一般语言必需的基本要素：变量、运算、循环/选择、函数等，导致了CSS代码的修改和维护非常麻烦。

动态样式语言：在CSS的基础上，添加了动态语言所必需的元素，如变量、运算、循环/选择、函数等，方便样式文件的修改和维护。

注意：浏览器默认只能处理静态样式语言，所有的动态样式语言必需设法转换为CSS才能被浏览器所理解！这个转换操作称为“编译”。

常见的动态样式语言：（1）Sass/SCSS （2）Stylus （3）Less

3、Less的使用

是一种动态样式语言.

LESS 为 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

（1）运行方式1：在客户端运行Less转换程序——了解

在HTML中引入xx.less，同时再引入一个less.js，就是一个可以运行在客户端浏览器中的less编译程序——效率太低，不推荐使用。

（2）运行方式2：在服务器端运行Less转换程序——推荐

步骤：

A、下载并安装一款服务器端的js解释器——NodeJS或者Rhino

B、下载less文件的转换程序(less-Compiler）——一个js脚本

C、在服务器端JS解释器中运行Lessc转换器，把自己编写的.less文件转换为.css文件（可以在命令行中使用转换程序，可以在WebStorm中使用转换程序）

D、继续编写HTML文件，引用编译得到的.css文件即可。

4、Less语法学习

（1）Less完全支持CSS的所有语法

（2）Less支持单行和多行注释，但只有多行注释会被转换到css文件中

（3）Less支持变量（variable）

 
 

   
   

    
    

   
   
   
   

    
    

     
     语法：@变量名:值;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     使用：.class{样式：@变量名;}
    
    
   
   
 
 

（4）Less支持样式混合（Mixin）——在一个样式中应用另一个样式

 
 

   
   

    
    

   
   
   
   

    
    

     
     语法：.class1{...}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .class2{
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       ...
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       .class1;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       ...
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

（5）带参混合

 
 

   
   

    
    

   
   
   
   

    
    

     
     语法：.class1(@参数1,@参数2,...){...}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .class2{
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       ...
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       .class1{值1，值2，...}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       ...
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

（6）嵌套规则

 
 

   
   

    
    

   
   
   
   

    
    

     
     语法：.class1{
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       ...
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       .class2{...}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     转换的结果：.class1{...}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       .class1 .class2{...}
    
    
   
   
 
 

（7）Less可以对变量、常量进行算术运算

语法：变量/值 +-*/ 变量/值
 
 

（8）Less为样式提供了几十个应用函数

lighten（颜色，亮度值）：将指定的颜色变亮指定的百分比

darken（颜色，亮度值）：将指定的颜色变暗指定的百分比

floor（数字）：对数值进行下取整

ceil（数字）：对数值进行上取整

（9）页面导入

尽量避免使用CSS文件中的@import指令——会增加HTTP请求次数；

为了可以将一个样式文件拆分为多个小的样式文件，由多人同时编写，可以使用LESS中的@import——less中导入其他的less文件，转换时会拼接为一个大的完整的CSS样式文件，故推荐在less中@import其他的less文件。

 
 

   
   

    
    

   
   
   
   

    
    

     
     语法：@import "xx.less";
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
       @import"yy";
    
    
   
   
 
 

大型项目中的less文件结构

 
 

   
   

    
    

   
   
   
   

    
    

     
     variable.less  放置所有的变量
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     mixin.less  放置所有的混合
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     reset.less  放置HTML元素重置样式
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     navbar.less  导航条相关样式
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     footer.less  页脚相关样式
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     ...
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     jd.less  =>jd.css总样式文件  一大堆@import
    
    
   
   
 
 

5、通过修改Bootstrap的less源文件实现样式定制

定制的目标：

（1）去除不需要的样式，如轮播广告、模态框...

在bootstrap.less文件中，注释掉不需要的@import即可

（2）定制需要的组件的默认样式，如修改导航条的默认背景色

修改variables.less文件中的变量即可

（3）在Bootstrap提供的默认样式基础上创建新样式，如定制dropdown中的divider的样式——组件的深度定制

修改某个组件所对应的.less文件

 

原文来自于：https://blog.csdn.net/weixin_39946352/article/details/80070187