I would like to combine twitter bootstrap together with angular material. I found bootstrap material design https://github.com/FezVrasta/bootstrap-material-design
Angular material uses following declarations;
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-aria/angular-aria.min.js"></script>
<script src="../bower_components/angular-material/angular-material.min.js"></script>
For bootstrap material, the declarations in the documentation are like this;
<!-- Material Design fonts -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Bootstrap Material Design -->
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-material-design.css">
<link rel="stylesheet" type="text/css" href="dist/css/ripples.min.css">
Will there be conflict if I include all the links? I am quite confused on how to combine angular material and bootstrap.
It is better not to mix Bootstrap and Angular Material because bootstrap's grid system (as of version 3~) is based on CSS display table and Angular Material is using display flex. So as suggested in this answer you're likely to get CSS conflicts and your application size will increase.
If you need better browser support and you're using Bootstrap, I have written Angular Bootstrap Material which is an AngularJS version of Bootstrap material design theme. It eliminates the dependency on jQuery and bootstrap's JavaScript and supports form validation using ng-messages.
You can install from bower via bower install abm.
Related
I am using ReactJS.net for my .Net MVC web application.
I have seen tutorials for reactJS where we can install libraries with npm.
Similarly, I am tying to add Tabulator data table library to my application that uses ReactJS.net
I have tried adding like the following in a view file along with the react libraries:
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://unpkg.com/tabulator-tables#4.6.1/dist/js/tabulator.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/tabulator-tables#4.6.1/dist/css/tabulator.min.css" rel="stylesheet">
<script src="#Url.Content("~/Scripts/React/Crud.jsx")"></script>
But it doesn't seem to work while I try to import it in the jsx file.
Any ideas on how to add libraries to ReactJS.NET.
I am trying for a solution that doesn't use WEBPACK or BABEL
Why am I having a weird css theme?
I'm navigating the react-bootstrap docs here: https://react-bootstrap.github.io/components/navbar/ and did exactly what's on the doc but somehow my implementation has this weird gradient going on instead of a flat color. This happens for all of my components also (buttons etc.)
My output:
The site's output:
If you follow the docs, you notice that they tell you to put two stylesheets (probably into your index.html in your React app):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
Just remove the optional theme line, and the gradient will go away.
I am developing new web application using AngularJS and bootstrap. I need some clarification
1) Is there any sequence to include below files for better performance? if Yes, why?
bootstrap.min.js
npm.js
angular.min.js
angular-ui-router.min.js
jquery.js
any other jQuery Library
style.css
bootstrap.min.css
bootstrap.min.css.map
bootstrap-theme.min.css
bootstrap-theme.min.css.map
2) what is difference between AngularJS 1 & AngularJS 2
3) what is difference between bootstrap 3 & bootstrap 4
Yes, There is a sequence to include CSS and Javascript library files. This sequence will also increase the performance of your website. Your website will load fast at client end.
To understand the sequence to include CSS and js library files. One should have the basic knowledge of HTML5 code template.
Basic HTML5 code template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Reference link: http://getbootstrap.com/getting-started/#template
Above template is the BOOTSTRAP Framework Coode Template.
CSS & JavaScript library file sequence as follows
Bootstrap Framework - CSS Library.
A) Always add BOOTSTRAP CSS library first.
Want to know about Bootstrap CSS library and component that bootstrap provide. Reference link: http://getbootstrap.com/css/
<link href="css/bootstrap.min.css" rel="stylesheet">
a) Bootstrap.min.css is the minified version of Bootstrap. This version is used only for production purpose.
b) Bootstrap.css is used for Development purpose.
B) Add the additional Bootstrap themes if required.
<link href="css/bootstrap.theme.css" rel="stylesheet">
OR
<link href="css/bootstrap.theme.min.css" rel="stylesheet">
For additional theme please refer this link: https://bootswatch.com/
C) After you can add all your Custom CSS Stylesheets.
2. Bootstrap Framework - JavaScript Library.
Note: Always add JavaScript above the closing body tag i.e <script src=""></script></body>
Why to add JavaScript above the closing tag: Because it increase the speed of loading speed of your website OR The website open very fast at Client end.
A) Always add jQuery library first. Other wise you can't able to use BOOTSTRAP JavaScript functionality like (Modal, Dropdown and many more).
Want to know about Bootstrap JavaScript library and component that bootstrap provide. Reference link: http://getbootstrap.com/js/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
B) Then add BOOTSTRAP JavaScript file.
<script src="js/bootstrap.min.js"></script>
C) After that you can use you own custom JavaScript file OR you can use jQuery Plugins.
3. Difference Between Bootstrap 3 & Bootstrap 4?
Bootstrap 3.3.6 is the current stable version when is used for web development & Bootstrap 4 is the testing version. Developers are testing Bootstrap 4. Bootstrap 4 is the next version of Bootstrap 3 with more functionality.
4. Difference Between Angular JS 1 & Angular JS 2?
Angular JS 1 is the pervious version of Angular JS 2.
I'm experimenting with the Angular UI Bootstrap libraries (specifically modal) but I'm having trouble getting the right versions of each library loaded in the right order, but I keep coming up against the No module: template/accordion/accordion-group.html error. I've switched back to Bootstrap 2.3 but it's still there. My application header is below, can anyone spot any wrong versions or JS files out of order? I'm also using Angular UI Sortable, hence its inclusion.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="style.css" />
</head>
My app declaration looks like this:
var app = angular.module('myModule', ['ui', 'ui.bootstrap']);
Edit
I managed to get it working like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.13.2/sortable.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="style.css" />
</head>
and
var app = angular.module('myModule', ['ui.sortable', 'ui.bootstrap']);
did you download all the files? according to their docs
Files to download
Build files for all directives are distributed in several flavours:
minified for production usage, un-minified for development, with or
without templates. All the options are described and can be downloaded
from here. It should be noted that the -tpls files contain the
templates bundled in JavaScript, while the regular version does not
contain the bundled templates. For more information, check out the FAQ
here and the README here.
Alternativelly, if you are only interested in a subset of directives,
you can create your own build.
Whichever method you choose the good news that the overall size of a
download is very small: <76kB for all directives (~20kB with gzip
compression!)
Looks like your error is with a template not begin available or loaded. Maybe you missed the download which packaged the templates. In your case the accordian template isn't being loaded.
After reading the FAQs I'm also wondering if having both angular-ui cdns is causing your problem. The angular-ui is loading first without templates and then your loading angular-ui-bootstrap with templates.
Angular-ui-bootstrap FAQ
This project comes with several deliverables described here:
https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files If
the roles of those files are not clear for you just pick
ui-bootstrap-tpls-[version].min.js, but be sure to include only one
file in your project.
You're showing this
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
Try just loading
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
More info on the builds from github
the excerpt i'm reading is
Now it should be clear that files with the -tpls in their name have
bootstrap-specific templates bundled with directives. For people who
want to take all the directives and don't need to customize anything
the solution is to grab a file named
ui-bootstrap-tpls-[version].min.js. If, on the other hand default
templates are not what you need you could take
ui-bootstrap-[version].min.js and provide your own templates, taking
the default ones
(https://github.com/angular-ui/bootstrap/tree/master/template) as a
starting point.
Did you add 'ui.router' and 'ui.sortable' as dependency in your app.js file ?
var myApp = angular.module('myApp', ['ui.router','ui.sortable']);
I would use a package manager such as Bower or WebPack to manage your client side dependencies.
According to the Angular UI docs you only need to add:
AngularJS and Bootstrap CSS. No need for jQuery.
And then you should initialize your Angular App module with ui.bootstrap dependency:
angular.module('myModule', ['ui.bootstrap']);
== UPDATE
According to this example, this should be everything you need:
index.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
```
app.js
var myapp = angular.module('sortableApp', ['ui.sortable']);
Let me know if this helps you
I have an existing CSS file that I would like to include in my ExtJS production build.
I am using a custom theme. I know I can go to MyApp/packages/myCustomTheme/sass/etc/ and use an #import in the all.scss file. But that uses the #import in the production file.
I'm hoping there is a way that I can get my existing CSS file compressed with the rest of my app's CSS.
To include your custom css file in your production build, you can include the stylesheet above the <!-- <x-compile> --> comment in your index.html. So your index.html should look like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>YourAppName</title>
<link rel="stylesheet" href="link-to-custom.css">
<link rel="stylesheet" href="link-to-another-custom.css">
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="app/app.js"></script>
<!-- </x-compile> -->
</head>
<body></body>
I don't know if there is better way of doing this. So far this has worked for me. Hope this helps.
According to the guide, we should be placing #import statements in etc/all.scss.
I found that in doing this, any imported files were in fact compiled in our theme's css file. Imports were not used in the production build.
http://docs.sencha.com/extjs/4.2.1/#!/guide/theming - see the section on "Adding Custom Utility SASS"