Bootstrap Markdown 项目教程
bootstrap-markdown项目地址:https://gitcode.com/gh_mirrors/boo/bootstrap-markdown
1. 项目的目录结构及介绍
bootstrap-markdown/
├── dist/
│ ├── css/
│ └── js/
├── src/
│ ├── less/
│ └── js/
├── locale/
├── Gruntfile.js
├── LICENSE
├── README.md
├── bower.json
└── package.json
- dist/: 包含编译后的 CSS 和 JS 文件。
- src/: 包含源代码,包括 LESS 和 JS 文件。
- locale/: 包含本地化文件。
- Gruntfile.js: Grunt 任务配置文件。
- LICENSE: 项目许可证文件。
- README.md: 项目说明文档。
- bower.json: Bower 包管理配置文件。
- package.json: npm 包管理配置文件。
2. 项目的启动文件介绍
项目的启动文件主要是 index.html
,它包含了 Bootstrap Markdown 的基本使用示例。以下是 index.html
的部分代码:
<form>
<input name="title" type="text" placeholder="Title" />
<textarea name="content" data-provide="markdown" rows="10"></textarea>
<label class="checkbox">
<input name="publish" type="checkbox"> Publish
</label>
<hr/>
<button type="submit" class="btn">Submit</button>
</form>
在这个文件中,<textarea>
元素通过 data-provide="markdown"
属性被转换为 Bootstrap Markdown 编辑器。
3. 项目的配置文件介绍
项目的配置文件主要包括 Gruntfile.js
和 package.json
。
Gruntfile.js
Gruntfile.js
是 Grunt 任务配置文件,用于自动化构建过程。以下是部分代码示例:
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
files: {
"dist/css/bootstrap-markdown.css": "src/less/bootstrap-markdown.less"
}
}
},
uglify: {
my_target: {
files: {
'dist/js/bootstrap-markdown.min.js': ['src/js/bootstrap-markdown.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['less', 'uglify']);
};
package.json
package.json
是 npm 包管理配置文件,包含了项目的基本信息和依赖项。以下是部分代码示例:
{
"name": "bootstrap-markdown",
"version": "2.10.0",
"description": "A bootstrap plugin for markdown editing",
"main": "dist/js/bootstrap-markdown.js",
"dependencies": {
"bootstrap": "~3.3.5",
"jquery": "~2.1.4"
},
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-less": "~1.0.1",
"grunt-contrib-uglify": "~0.9.1"
}
}
通过这些配置文件,可以管理和自动化项目的构建和依赖项。
bootstrap-markdown项目地址:https://gitcode.com/gh_mirrors/boo/bootstrap-markdown