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"
  }
}

通过这些配置文件，可以管理和自动化项目的构建和依赖项。