【移动Web开发】Bootstrap基础及安装less编译环境

╰+攻爆jí腚メ 2021-12-04 07:45 217阅读 0赞

**本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][https_github.com_qianguyihao_web]  
非商业用途自由转载，保持署名，注明出处！**

--------------------

### 文章目录 ###

*  1.Bootstrap
 *  2.less
 *  3.less的编译
 *  4.补充：cmd操作

# 1.Bootstrap #

*  中文官网下载以及文档查阅地址：[https://v3.bootcss.com/][https_v3.bootcss.com]
 *  meta标签  
    Compatible：表示IE下使用最新标准  
    viewport 视口：在移动端浏览器的设置
 *  条件注释：满足即执行
 *  Bootstrap框架中的所有 JS 组件都**依赖于 jQuery 实现**。
 *  工程文件目录结构如下：  
    ![在这里插入图片描述][20190718103115184.png_pic_center]
 *  先引入第三方文件，再引入自己写的文件，css用link引入，js在script内引入，可以设置多个
 *  如果需要哪个样式，直接**根据文档的指引**，在相应的元素里加指定的类名即可。

# 2.less #

*  CSS预处理器：让CSS能像编程语言一样做一些预定的处理。主要有：**Sass（SCSS）、LESS**、**Stylus**、Turbine、等。
 *  Less文档中文网：[http://lesscss.cn/；Bootstrap网：https://less.bootcss.com/][http_lesscss.cn_Bootstrap_https_less.bootcss.com]
 *  注释推荐：//;但是转化为css后将会被删除，css只识别/\*\*/
 *  定义变量：@变量名：变量值；引用变量：@变量名；（在css中好像也可以？）
 *  编译成css后自动删除@
 *  使用子代选择器嵌套在\{\}内，如：

.container { 
      > .row { 
      	a{ }
        }
     }

*  Mixin:把重复的代码放在一个类中，然后调用该类。
 *  Import：若定义一个文件名为\_button1.less，则在main.css中调用：

@import url(`_button1.less');/*相对路径*/

*  内置函数：变亮,如lighten(\#000, 10%);变暗，如darken(\#fff, 10%);
 *  在html中引用less.js文件：  
    1.写完less，编译为css，在html中导入css文件（产品上线后推荐）  
    2.直接引用（平时开发时推荐，但会增加编译时间）
 *  less需要编译，需要引入less.js,less 编译应该在**服务端或使用 grunt 自动编译**

# 3.less的编译 #

*  依赖Node.js,官网：[https://nodejs.org/zh-cn/；][https_nodejs.org_zh-cn]
 *  一直next安装（可以选安装路径）完成，输入node.exe -v，可以查看 node.js 的版本即为成功
 *  安装less编译环境，参考链接  
    [https://blog.csdn.net/qq\_19865749/article/details/52498113][https_blog.csdn.net_qq_19865749_article_details_52498113]
 *  在cmd中使用命令npm install -g less，等待3分钟左右会显示安装路径即为成功，如下图：  
    ![在这里插入图片描述][20190718123242992.png]

# 4.补充：cmd操作 #

1.进入指定文件目录：如要进入D:\\c++程序\\tspc，则**先输入D:回车后再输入cd D:\\c++程序\\tspc**  
2.输入cd/返回根目录  
3.输入cd…返回上一级目录  
4.打开：win+R，输入“cmd”

*  编译：**在less路径下**输入lessc xxx.less 即可编译，若输入**lessc xxx.less > …\\xx.css**输出到指定路径。

--------------------

**如有不当之处，欢迎指正!  
谢谢！**

[https_github.com_qianguyihao_web]: https://github.com/qianguyihao/web
[https_v3.bootcss.com]: https://v3.bootcss.com/
[20190718103115184.png_pic_center]: /images/20211204/448131833cda4fcd8288c0572fceb2bb.png
[http_lesscss.cn_Bootstrap_https_less.bootcss.com]: http://lesscss.cn/%EF%BC%9BBootstrap%E7%BD%91%EF%BC%9Ahttps://less.bootcss.com/
[https_nodejs.org_zh-cn]: https://nodejs.org/zh-cn/%EF%BC%9B
[https_blog.csdn.net_qq_19865749_article_details_52498113]: https://blog.csdn.net/qq_19865749/article/details/52498113
[20190718123242992.png]: /images/20211204/1cdf5426ab594790b94ef2463c904819.png