On the Getting started page for bootstrap it says if I want to develop using bootstrap source I need bower (which needs node.js and npm)> So on Windows I installed node.js & npm then did npm install -g bower which apparently installed bower in my user profile AppData\Roaming\node_modules\bower (due to the -g option).
The I ran bower install bootstrap and went looking for it in the user profile only to find out that it got installed in the folder bower_components in my current folder (or node_modules\bower in the current directory if I use the npm install command without the -g options).
Before I embark in using bootstrap for my development activities I would like to understand more how I am supposed to use it.
I have a project maven spring based web project opened in eclipse (let's call it msb for maven spring based and assume the location is ~/workspace/bs-sample/msb for the path where the project resides) and I am wondering) and I need to understand:
What do I need to install on my desktop to develop with bootstrap beyond the bower and node.js and npm I have already installed and what commands do I need to use?
How do I add bootstrap to my msb web project in eclipse? What folder and what tools need to be installed?
What customization do I need to perform to start using bootstrap in my web project. I actually am trying to use bootstrap-treeview in my web project.
When changing to the bootstrap folder and running npm install in what folder will the npm command put the dependencies? I ask this because I cannot run this command as npm installs its stuff using the git command/ssh and I cannot use ssh because I am behind an HTTP authenticated proxy. I have to add the dependencies manually.
Any clarification would be much appreciated here and in the getting started page for bootstrap for people unfamiliar with this combination of tools.
You can get started with Bootstrap in one of their three mentioned ways:
Adding it to your project
Building from source
Using the SASS port
If all you want to do is add it to your project, you can use the first option.
For this, you just download the files and add them to your web pages like any other CSS or JS.
The minimized version is best for production, while the non-minimized version is best for debugging issues.
How you include them into your project depends on which framework you are using for you web project (i.e. template engines, tiles, pure JSPs, etc).
You can start with a basic template for a given page and add components (including your treeview) as you see fit.
Template below from Bootstrap's site.
<!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>
Related
I'm trying to download Framework7 CLI - I'm also not a developer that develops and opens programs through command lines
I know the install is explained fairly decent, but when it says to enter
$ npm install framework7
Where do I enter that command? I used to be able to download the files directly, but now when I do the functionality isn't there. I also watched this video on youtube but it didn't help
https://youtu.be/65hfVB49PZU
Thank you in advance...
I've asked questions on the net and nobody has gotten back to me.
$ npm install framework7
There are none I haven't gotten that far yet.
You can pass the CLI to a terminal or you can directly download the necessary files and add it to your project via this link: https://github.com/framework7io/Framework7/releases/
Just click on the Source code(zip) under the v4.4.3 release. Then move the bundle.js and bundle.css files to your project file.
In your app.html file, define the paths like this:
<link rel="stylesheet" href="path/to/framework7.bundle.min.css">
<script src="path/to/framework7.bundle.min.js"></script>
You can also look at the kitchen-sink folder, it's very helpful. Make sure you're running the folders on a server or localhost.
I make this question because of a problem I'm having making "bootstrap-select" to work with Bootstrap 4, but its a rather general conceptual question. Let's go:
What's the difference between installing a package and just referencing its css/js in html? Let's take bootstrap-select as an example:
I can put the references I paste below inside index.html and bootstrap-select will work (or at least it should) but I can also install package with "npm install bootstrap-select" so what's really the difference between both approaches? It is one of them just enough for make the package to work? Are both steps required? What's a best practice?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js" />
Another example, documentation says bootstrap-select requires Popper so it's enough to add this next script reference to index.html or instead I should install popper through npm install popper? Or I should do both?
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" />
According to me, the best practice is to install and get into node_module. my reason for that would be
You need to be connected to the internet while loading the application (Package won't load when you're running in intraNet.
You might never know when would the package CND is updated and you might face some issues after updates.
Feel free to correct me :)
It's recommended by angular that you use angular.cli.json(angular version 4) and angualr.json in (angular 5) Rather than declaring the js files in index.html, this keeps your code clean. And installing through npm is easy and reduces the effort for the js version updates as well.
I've implemented the Ace Editor using the recommended CDN I've seen in their official documentation and it works great.
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ace.js" type="text/javascript" charset="utf-8"></script>
However, being an external resource, it requires internet, which the user may not always benefit of, as in my case, the application could run on the internal server of an embedded device.
Simply copying the code from the cdn link into a JavaScript plugin starts the editor without any features.
Is there any way to manage this library using bower or npm ?
You need to include mode, theme, and worker files in addition to ace.js, copy the whole https://github.com/ajaxorg/ace-builds/tree/master/src, or use npm install ace-builds
How do I keep Worklight from making changes in the .html file that break things in the iPhone app? Or at least, how can I control what it changes?
I'm using IBM Worklight 6.1. After generating an iPhone environment I do the following:
"Run as-> Build iPhone Environment"
Then Worklight copies myApp.html from the common directory to the iPhone/native/www/default directory
Then Worklight makes changes to the original myApp.html file that causes my iPhone app to fail.
I've tried deleting all the code in /native, then do a "run as...build...", but still there are changes made to the html file that break the app.
Example of some things that get changed from the original /common/app.html file:
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
gets changed to this:
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META content="text/html; charset=UTF-8" http-equiv="Content-Type">
It also adds an extra (redundant) line of this:
<link href="worklight/worklight.css" rel="stylesheet">
So I end up with:
<link href="worklight/worklight.css" rel="stylesheet">
<link href="worklight/worklight.css" rel="stylesheet">
Using Eclipse Keplar with Worklight6.1
I'm not able to reproduce this problem in my environment (Eclipse Kepler (4.3.1.v20130911-1000), Worklight Studio 6.1 (6.1.0.00-20131126-0620) ).
Can you tell us what version of Worklight Studio you are using, and what version of Eclipse you are using?
The direct answer to your question is that there are no controls that let you influence what Worklight Studio changes in the HTML file when it copies it to the native environment - but, it should not be necessary to do this.
I've installed Twitter.Bootstrap.MVC4 into an Asp.Net MVC Empty project template and when I start the application there are issues with the style sheets. It looks to me like they aren't linked in. Screen grab below.
And the head section is below
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/content/css?v=o7EqNjjD8FotmTy6On6adamUxH559LswOFRclfNrDPM1" rel="stylesheet"/>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="/scripts/html5shiv.js"></script>
<![endif]-->
</head>
In the BootstrapBundleConfig.cs file, there is a path error.
"~/Content/bootstrap.css" should be "~/Content/bootstrap/bootstrap.css"
bootstrap-responsive.css is also missing.
Have fun ;-)
I had similar problem, this happens because when you install nuget package it installs the latest bootstrap which is now 3.0, while Twitter.Bootstrap.Mvc4.sample has configured itself for 2.x.
If you don't need 3.0, than you can download 2.x version and copy scripts and content in their respective folders.
For 3.0 move css files from ~/Content/bootstrap to ~/Content.
If you are just looking for a sample project illustrating ASP.NET MVC with Twitter Bootstrap, you can download visual studio 2013 preview for Web and create a new MVC project. Bootstrap is available in MVC template. New addition to MVC 5. This template will enable you to see the folder structure and make the necessary adjustments in the above project.