bootstrap-layout/docs/src/html/pages/index.html at master · csseditor/bootstrap-layout · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
---
title: Getting started
slug: home
---
{% extends "layouts/default.html" %}

{% block page %}
{% markdown %}
# bootstrap-layout

Bootstrap layout with sidebar navigation, sidebar skins, sidebar transition, custom scrollbars, sidebar menus and other advanced features and utilities for Bootstrap 4.

## Installation
> Simple install via npm:

```bash
npm install bootstrap-layout
```
{% endmarkdown %}

<h2>Styling</h2>
<div class="card card-block">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a href="#css" data-toggle="pill" class="nav-link active">CSS</a>
    </li>
    <li class="nav-item">
      <a href="#sass" data-toggle="pill" class="nav-link">Sass</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="css">
      {% include 'code/installation/css.html' %}
    </div>
    <div class="tab-pane" id="sass">
      {% include 'code/installation/sass.html' %}
    </div>
  </div>
</div>

<h2>JavaScript</h2>
<div class="card card-block">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a href="#js-static" data-toggle="pill" class="nav-link active">Global</a>
    </li>
    <li class="nav-item">
      <a href="#js-es6" data-toggle="pill" class="nav-link">ES6</a>
    </li>
    <li class="nav-item">
      <a href="#js-browserify" data-toggle="pill" class="nav-link">Browserify</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="js-static">
      {% include 'code/installation/js-static.html' %}
    </div>
    <div class="tab-pane" id="js-es6">
      {% include 'code/installation/js-es6.html' %}
    </div>
    <div class="tab-pane" id="js-browserify">
      {% include 'code/installation/js-browserify.html' %}
    </div>
  </div>
</div>

<h2>Boilerplates</h2>
<blockquote>
  Project starter setups using Bootstrap Layout.
</blockquote>

<ul class="list-unstyled list-group-menu">
  <li class="list-group-item">
    <a target="_blank" href="https://github.com/themekit/bs-layout-boilerplate-npm">bs-layout-boilerplate-npm</a> <br>
    Basic npm setup (no build system)
  </li>
  <li class="list-group-item">
    <a target="_blank" href="https://github.com/themekit/bs-layout-boilerplate-gulp">bs-layout-boilerplate-gulp</a> <br>
    Basic gulp setup (compile Sass, import Sass files from npm packages, customize colors)
  </li>
  <li class="list-group-item">
    <a target="_blank" href="https://github.com/themekit/bs-layout-boilerplate-gulp-advanced">bs-layout-boilerplate-gulp-advanced</a> <br>
    Advanced gulp setup (compile Sass, import Sass files from npm packages, customize colors, minify CSS, autoprefixer, sourcemaps, browserify mo
  dule system, file watchers)</li>
  <li class="list-group-item">
    <a target="_blank" href="https://github.com/themekit/bs-layout-boilerplate-laravel">bs-layout-boilerplate-laravel</a> <br>
    <strong>Laravel</strong> application setup (gulp, Laravel Elixir, Sass, browserify)
  </li>
  <li class="list-group-item">
    <a target="_blank" href="https://github.com/themekit/bs-layout-boilerplate-rails">bs-layout-boilerplate-rails</a> <br>
    <strong>Rails</strong> application setup (Asset Pipeline)
  </li>
  <li class="list-group-item">
    <a target="_blank" href="https://github.com/themekit/bs-layout-boilerplate-angular2">bs-layout-boilerplate-angular2</a> <br>
    <strong>Angular 2</strong> application setup (TypeScript, SystemJS)
  </li>
  <li class="list-group-item">
    <a target="_blank" href="https://github.com/themekit/bs-layout-boilerplate-vue">bs-layout-boilerplate-vue</a> <br>
    <strong>Vue.js</strong> application setup (Webpack)
  </li>
</ul>

{% endblock %}