Skip to content

Commit eeb4dab

Browse files
mrholekmrholek
committed
docs: update content
1 parent ed7963d commit eeb4dab

File tree

6 files changed

+61
-37
lines changed

6 files changed

+61
-37
lines changed

‎docs/content/components/loading-buttons.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ other_frameworks: loading-button
3939

4040
## Usage
4141

42+
{{< bootstrap-compatibility >}}
43+
4244
### Options
4345

4446
{{< markdown >}}

‎docs/content/forms/date-picker.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,8 @@ To use localized dates, we need to additionally add locale files, in this case,
282282

283283
## Usage
284284

285+
{{< bootstrap-compatibility >}}
286+
285287
### Via data attributes
286288

287289
Add `data-coreui-toggle="date-picker"` to a `div` element.

‎docs/content/forms/date-range-picker.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -324,6 +324,8 @@ To use localized dates, we need to additionally add locale files, in this case,
324324

325325
## Usage
326326

327+
{{< bootstrap-compatibility >}}
328+
327329
### Via data attributes
328330

329331
Add `data-coreui-toggle="date-range-picker"` to a `div` element.

‎docs/content/forms/multi-select.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,8 @@ You may also choose from small and large multi selects to match our similarly si
214214

215215
## Usage
216216

217+
{{< bootstrap-compatibility >}}
218+
217219
### Options
218220

219221
{{< markdown >}}

‎docs/content/forms/time-picker.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,8 @@ RTL support is built-in and can be explicitly controlled through the `$enable-rt
130130

131131
## Usage
132132

133+
{{< bootstrap-compatibility >}}
134+
133135
### Via data attributes
134136

135137
Add `data-coreui-toggle="time-picker"` to a `div` element.

‎docs/content/getting-started/introduction.md

Lines changed: 51 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -17,66 +17,70 @@ toc: true
1717

1818
Looking to quickly add CoreUI for Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? [Head to the downloads page]({{< docsref "/getting-started/download" >}}).
1919

20-
2120
CoreUI was created as an extension to Bootstrap, allowing it to be used both as a standalone library and as a replacement for the currently utilized Bootstrap in your project.
2221

23-
### Standalone Library
24-
25-
CoreUI serves as an independent library, perfect for creating web UIs without Bootstrap. It provides a broad range of customizable components, enabling unique designs with high performance. Ideal for projects seeking a versatile UI toolkit.
26-
27-
#### CSS
22+
### CSS
2823

2924
Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
3025

26+
{{< tabs groupId="standalone-css" >}}
27+
{{% tab name="CoreUI" %}}
3128
```html
3229
<link href="{{< param "cdn.css" >}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
3330
```
34-
35-
If you use CoreUI PRO version.
36-
31+
{{% /tab %}}
32+
{{% tab name="CoreUI PRO" %}}
3733
```html
3834
<link href="{{< param "cdn.css_pro" >}}" rel="stylesheet" integrity="{{< param "cdn.css_pro_hash" >}}" crossorigin="anonymous">
3935
```
36+
{{% /tab %}}
37+
{{< /tabs >}}
4038

41-
#### JS
39+
### JS
4240

4341
Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and [Popper](https://popper.js.org/). Place **one of the following `<script>`s** near the end of your pages, right before the closing `</body>` tag, to enable them.
4442

45-
##### Bundle
43+
#### Bundle
4644

4745
Include every CoreUI for Bootstrap JavaScript plugin and dependency with one of our two bundles. Both `coreui.bundle.js` and `coreui.bundle.min.js` include [Popper](https://popper.js.org/) for our tooltips and popovers. For more information about what's included in CoreUI, please see our [contents]({{< docsref "/getting-started/contents#precompiled-coreui" >}}) section.
4846

47+
{{< tabs groupId="standalone-js-bundle" >}}
48+
{{% tab name="CoreUI" %}}
4949
```html
5050
<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
5151
```
52-
53-
If you use CoreUI PRO version.
54-
52+
{{% /tab %}}
53+
{{% tab name="CoreUI PRO" %}}
5554
```html
5655
<script src="{{< param "cdn.js_pro_bundle" >}}" integrity="{{< param "cdn.js_pro_bundle_hash" >}}" crossorigin="anonymous"></script>
5756
```
57+
{{% /tab %}}
58+
{{< /tabs >}}
5859

59-
##### Separate
60+
#### Separate
6061

6162
If you decide to go with the separate scripts solution, Popper must come first (if you're using tooltips or popovers), and then our JavaScript plugins.
6263

64+
{{< tabs groupId="standalone-js-separate" >}}
65+
{{% tab name="CoreUI" %}}
6366
```html
6467
<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
6568
<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
6669
```
67-
68-
If you use CoreUI PRO version.
69-
70+
{{% /tab %}}
71+
{{% tab name="CoreUI PRO" %}}
7072
```html
7173
<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
7274
<script src="{{< param "cdn.js_pro" >}}" integrity="{{< param "cdn.js_pro_hash" >}}" crossorigin="anonymous"></script>
7375
```
76+
{{% /tab %}}
77+
{{< /tabs >}}
7478

75-
##### Modules
79+
#### Modules
7680

7781
If you use `<script type="module">`, please refer to our [using CoreUI for Bootstrap as a module]({{< docsref "/getting-started/javascript#using-coreui-as-a-module" >}}) section.
7882

79-
##### Components
83+
#### Components
8084

8185
Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
8286

@@ -97,61 +101,71 @@ Curious which components explicitly require our JavaScript and Popper? Click the
97101
{{< /markdown >}}
98102
</details>
99103

100-
### Bootstrap Replacement
104+
## Bootstrap Replacement
101105

102-
CoreUI enhances Bootstrap projects by adding advanced components and features, offering a smooth upgrade with minimal adjustments. It retains Bootstrap's familiar structure while introducing new possibilities for UI development.
106+
{{< added-in "5.0.0-rc.2" >}}
107+
108+
If you're currently using Bootstrap in your project or want to maintain full compatibility with Bootstrap, check out how you can add CoreUI for Bootstrap to your project. CoreUI enhances Bootstrap projects by adding advanced components and features, offering a smooth upgrade with minimal adjustments. It retains Bootstrap's familiar structure while introducing new possibilities for UI development.
103109

104110
{{< bootstrap-compatibility >}}
105111

106-
#### CSS
112+
### CSS
107113

108114
Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
109115

116+
{{< tabs groupId="bootstrap-css" >}}
117+
{{% tab name="CoreUI for Bootstrap" %}}
110118
```html
111119
<link href="{{< param "cdn.css_bs" >}}" rel="stylesheet" integrity="{{< param "cdn.css_bs_hash" >}}" crossorigin="anonymous">
112120
```
113-
114-
If you use CoreUI PRO version.
115-
121+
{{% /tab %}}
122+
{{% tab name="CoreUI PRO for Bootstrap" %}}
116123
```html
117124
<link href="{{< param "cdn.css_bs_pro" >}}" rel="stylesheet" integrity="{{< param "cdn.css_bs_pro_hash" >}}" crossorigin="anonymous">
118125
```
126+
{{% /tab %}}
127+
{{< /tabs >}}
119128

120129

121-
#### JS
130+
### JS
122131

123132
Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and [Popper](https://popper.js.org/). Place **one of the following `<script>`s** near the end of your pages, right before the closing `</body>` tag, to enable them.
124133

125-
##### Bundle
134+
#### Bundle
126135

127-
Include every CoreUI for Bootstrap JavaScript plugin and dependency with one of our two bundles. Both `coreui.bundle.js` and `coreui.bundle.min.js` include [Popper](https://popper.js.org/) for our tooltips and popovers. For more information about what's included in CoreUI, please see our [contents]({{< docsref "/getting-started/contents#precompiled-coreui" >}}) section.
136+
Include every CoreUI for Bootstrap JavaScript plugin and dependency with one of our two bundles. Both `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/) for our tooltips and popovers.
128137

138+
{{< tabs groupId="bootstrap-js-bundle" >}}
139+
{{% tab name="CoreUI for Bootstrap" %}}
129140
```html
130141
<script src="{{< param "cdn.js_bs_bundle" >}}" integrity="{{< param "cdn.js_bs_bundle_hash" >}}" crossorigin="anonymous"></script>
131142
```
132-
133-
134-
If you use CoreUI PRO version.
135-
143+
{{% /tab %}}
144+
{{% tab name="CoreUI PRO for Bootstrap" %}}
136145
```html
137146
<script src="{{< param "cdn.js_bs_pro_bundle" >}}" integrity="{{< param "cdn.js_bs_pro_bundle_hash" >}}" crossorigin="anonymous"></script>
138147
```
148+
{{% /tab %}}
149+
{{< /tabs >}}
139150

140-
##### Separate
151+
#### Separate
141152

142153
If you decide to go with the separate scripts solution, Popper must come first (if you're using tooltips or popovers), and then our JavaScript plugins.
143154

155+
{{< tabs groupId="bootstrap-js-separate" >}}
156+
{{% tab name="CoreUI for Bootstrap" %}}
144157
```html
145158
<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
146159
<script src="{{< param "cdn.js_bs" >}}" integrity="{{< param "cdn.js_bs_hash" >}}" crossorigin="anonymous"></script>
147160
```
148-
149-
If you use CoreUI PRO version.
150-
161+
{{% /tab %}}
162+
{{% tab name="CoreUI PRO for Bootstrap" %}}
151163
```html
152164
<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
153165
<script src="{{< param "cdn.js_bs_pro" >}}" integrity="{{< param "cdn.js_bs_pro_hash" >}}" crossorigin="anonymous"></script>
154166
```
167+
{{% /tab %}}
168+
{{< /tabs >}}
155169

156170
## Starter template
157171

0 commit comments

Comments
 (0)