# bootsrap_components_diy **Repository Path**: react-module/bootsrap_components_diy ## Basic Information - **Project Name**: bootsrap_components_diy - **Description**: 这个项目描述如何自定义bootstrap组件以及引入font-awesome的图标 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2017-06-15 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ##自定义bootstrap组件并引入awesome font 在自定义bootstrap组件时首先需要把相关的less文件都下载下来，因为bootstrap.css都是less源码编译生成的 ###Core variables and mixins >//定义变量，方便后面调用 >@import "variables.less"; >//定义混合 这类似定义函数或者宏，在mixins文件夹中可看到所定义的函数 >@import "mixins.less"; >// Reset and dependencies >//标准化css，这是一个专门将不同浏览器的默认css特性设置为>统一效果的css库，编译后对应源码为8~190行 >@import "normalize.less"; >//打印样式，编译后对应源码为192~266行 >@import "print.less"; >//图标样式，编译后对应源码为267~885行 >@import "glyphicons.less"; >// Core CSS 核心CSS >//脚手架，相当于全局样式，编译后对应源码为886~989行 >@import "scaffolding.less"; //排版样式，编译后对应源码为990~1335行 >@import "type.less"; //代码样式，编译后对应源码为1336~1389行 >@import "code.less"; >//栅格系统，这是Bootstrap支持响应式的重点，编译后对应源码为1390~2056行 >@import "grid.less"; >//表格样式，编译后对应源码为2057~2296行 >@import "tables.less"; >//表单样式，编译后对应源码为2297~2781行 >@import "forms.less"; >//按钮样式，编译后对应源码为2782~3171行 @import "buttons.less"; ###// Components 组件 >//组件中折叠和隐藏动画，编译后对应源码为2782~3171行 @import "component-animations.less"; //下拉菜单及下三角符号，编译后对应源码为3209~3348行 @import "dropdowns.less"; //按钮组，编译后对应源码为3349~3520行 @import "button-groups.less"; //输入框组，编译后对应源码为3521~3674行 @import "input-groups.less"; //导航，编译后对应源码为3675~3868行 @import "navs.less"; //导航条，编译后对应源码为3869~4393行 @import "navbar.less"; //面包屑，编译后对应源码为4394~4411行 @import "breadcrumbs.less"; //默认分页，编译后对应源码为4412~4504行 @import "pagination.less"; //翻页，编译后对应源码为4505~4542行 @import "pager.less"; //标签，编译后对应源码为4543~4609行 @import "labels.less"; //徽章，编译后对应源码为4610~4648行 @import "badges.less"; //巨幕，编译后对应源码为4649~4686行 @import "jumbotron.less"; //缩略图，编译后对应源码为4687~4712行 @import "thumbnails.less"; //警告框，编译后对应源码为4713~4787行 @import "alerts.less"; //进度条，编译后对应源码为4788~4881行 @import "progress-bars.less"; //媒体对象，编译后对应源码为4882~4915行 @import "media.less"; //列表组，编译后对应源码为4916~5091行 @import "list-group.less"; //面板，编译后对应源码为5092~5426行 @import "panels.less"; //具有响应式特性的嵌入内容，编译后对应源码为5427~5452行 @import "responsive-embed.less"; //well效果，编译后对应源码为5453~5474行 @import "wells.less"; //关闭按钮图标，编译后对应源码为5475~5499行 @import "close.less"; ###// Components w/ JavaScript >//模态框，编译后对应源码为5500~5622行 @import "modals.less"; //工具提示，编译后对应源码为5623~5720行 @import "tooltip.less"; //弹出框，编译后对应源码为5721~5841行 @import "popovers.less"; //轮播，编译后对应源码为5842~6063行 @import "carousel.less"; ###// Utility classes >//实用工具类，编译后对应源码为6064~6147行 @import "utilities.less"; //响应式工具类，编译后对应源码为6148~6357行 @import "responsive-utilities.less"; 具体可以查看 [bootstrap源码分析](http://www.cnblogs.com/jesse131/p/5966145.html)。 **** ##在使用时应该这样 1.把less文件全部添加到项目中 2.新建custom-bootstrap文件，在文件中 >@import "bootstrap.less"; 3.删除bootstrap中所有组件，保留需要的组件，需要修改样式时可以直接修改variable.less中的变量，也可以直接在改less文件中修改 4.在index.html文件中引入custom-bootstrap.css,每次修改需要在custom-bootstrap.less中保存编译一次 *** ##引入awesome font 因为bootstrap本身自带的文字图标太少了而且使用样式不多，所以可以使用**Font Awesome**，该文字图标是专门针对**bootstrap**设计而成的,具体这么用 * 把`font-awesome`的源文件下载下来,把相关的less源文件放到项目中 * 把font文件也放到项目中，这个文件是相关的文字图标 * 在bootstrap.less中把`@import "glyphicons.less"`替换成`@import "./font-less/font-awesome.less";` * 在图标的variable.less中修改`@FontAwesomePath: "./less/font-less/font";`的路径，路径指的是当前文件在根目录。 * 在[官网](http://www.bootcss.com/p/font-awesome/#integration)找到自己喜欢的图标 > \