-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(getting-started): update readme.md and bootstrap.md files (#3933)
* docs(documentation): update readme and bootstrap.md files * docs(readme): fix conflicts * docs(readme): fix conflicts * docs(getting-started): update readme.md and bootstrap.md files * docs(getting-started): update readme.md and bootstrap.md files according to the comments
- Loading branch information
Showing
3 changed files
with
178 additions
and
149 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| # Using with Bootstrap and angular-cli | ||
|
|
||
| This is extracted from the [angular-cli include bootstrap story](https://github.com/angular/angular-cli/wiki/stories-include-bootstrap) and demonstates one way to accomplish using Bootstrap 3 or 4 with ngx-bootstrap. The `Bootstrap's` version is defined automatically by the `ngx-bootstrap`. | ||
|
|
||
| ## Installing angular-cli | ||
|
|
||
| *Recommended*: to use latest stable `angular-cli` version. | ||
|
|
||
| *Note*: You can skip this part if you already have application generated by `ng-cli` and webpack. | ||
|
|
||
| ```bash | ||
| npm i -g @angular/cli | ||
| ng new my-app | ||
| cd my-app | ||
| ng serve | ||
| ``` | ||
|
|
||
| ## Adding ngx-bootstrap and Bootstrap | ||
|
|
||
| - install `ngx-bootstrap` and `Bootstrap` | ||
|
|
||
| ```bash | ||
| npm install ngx-bootstrap bootstrap --save | ||
| ``` | ||
|
|
||
| ## Using with css | ||
| ### Configuring Project | ||
|
|
||
| Now that the project is set up it must be configured to include the Bootstrap CSS. You have two options: | ||
|
|
||
| - add styles to .angular-cli.json: | ||
| - Open the file .angular-cli.json from the root of your project. | ||
| - Under the property apps the first item in that array is the default application. | ||
| - There is a property styles which allows external global styles to be applied to your application. | ||
|
|
||
| - Specify the path to bootstrap.min.css | ||
|
|
||
| It should look like the following when you are done: | ||
| ``` | ||
| "styles": [ | ||
| "../node_modules/bootstrap/dist/css/bootstrap.min.css", | ||
| "styles.css" | ||
| ], | ||
| ``` | ||
|
|
||
| Note: When you make changes to .angular-cli.json you will need to re-start ng serve to pick up configuration changes. | ||
|
|
||
| - add styles to index.html: | ||
| - for Bootstrap 3: | ||
| ``` | ||
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> | ||
| ``` | ||
|
|
||
| - or for Bootstrap 4: | ||
| ``` | ||
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> | ||
| ``` | ||
|
|
||
| ## Using SASS | ||
|
|
||
| ### Configuring Project | ||
|
|
||
| Ensure that the project is set up to use scss by default and that the main styles file is styles.scss | ||
|
|
||
| The easiest way to do this is when creating a new project by | ||
| ```bash | ||
| ng new my-app --style=scss | ||
| cd my-app | ||
| ``` | ||
|
|
||
| If the project has already been created then | ||
|
|
||
| - rename `src/styles.css` to `src/styles.scss` | ||
| - in `.angular-cli.json` make the following changes | ||
| ``` | ||
| "styles": [ | ||
| "styles.css" <-- rename this from .css to .scss | ||
| ], | ||
| . | ||
| . | ||
| . | ||
| "defaults": { | ||
| "styleExt": "css" <-- set this to default to .scss | ||
| } | ||
| ``` | ||
| Create an empty file `_variables.scss` in `src/`. | ||
|
|
||
| In `styles.scss` add the following: | ||
|
|
||
| ``` | ||
| @import 'variables'; | ||
| @import '../node_modules/bootstrap/scss/bootstrap'; | ||
| ``` | ||
|
|
||
| ## Checkout | ||
|
|
||
| Open `src/app/app.module.ts` and add | ||
|
|
||
| ```typescript | ||
| import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; | ||
| ... | ||
|
|
||
| @NgModule({ | ||
| ... | ||
| imports: [BsDropdownModule.forRoot(), ... ], | ||
| ... | ||
| }) | ||
| ``` | ||
|
|
||
| - open `src/app/app.component.html` and add | ||
| ``` | ||
| <div class="btn-group" dropdown> | ||
| <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle"> | ||
| Button dropdown <span class="caret"></span> | ||
| </button> | ||
| <ul *dropdownMenu class="dropdown-menu" role="menu"> | ||
| <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li> | ||
| <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li> | ||
| <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li> | ||
| <li class="divider dropdown-divider"></li> | ||
| <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| ``` | ||
|
|
||
| run the app in demo mode and ensure the dropdown button functions correctly. |
This file was deleted.
Oops, something went wrong.