All geek questions in one place

Twitter download on Node.js and Express

How can I use Twitter Bootstrap on Node.js and Express?

I know that I have to put CSS and Javascript files in the ./public directory (if it is installed by default). But when I look at how to use Twitter Bootstrap on Node.js and Express, I find out that there are many options for using Twitter Bootstrap.

For example, just put the boot CSS files and JS files in the appropriate directories or specify:

<link rel='stylesheet' href='assets/css/bootstrap-responsive.css'> <link rel='stylesheet' href='https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap.js'>

etc., and also there are two sources: regular and .min.css file, each with CSS and JS. So, how can I serve the corresponding Bootstrap file in Node.js and Express?

Here are the first few lines of my current code (is this necessary?), Which doesn’t work with a responsive design (it doesn’t fold vertically when I narrow the screen to simulate the size of smartphones, but instead just scale down the size with each ratio the same) .

 <!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title><%= title %></title> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <link rel='stylesheet' href='/stylesheets/bootstrap.min.css'> <link rel='stylesheet' href='assets/css/bootstrap-responsive.css'> <script src='/javascripts/jquery-2.0.2.min.js'></script> <style type='text/css'> /* Large desktop */ @media (min-width: 980px) { body { padding-top: 60px; } } /* smartphones */ @media (max-width: 480px) { body { padding-top: 30px; } } </style> </head>
+4
source share
2 answers

Create one subfolder in the shared folder and name it as stylesheets. Then put all your twss bootstraper css files into this stylesheets folder. You can then link the file as shown below. Similarly for js files.

  <link rel='stylesheet' href='stylesheets/bootstrap.min.css'> <link rel='stylesheet' href='stylesheets/bootstrap-responsive.css'> <script src='javascripts/jquery-2.0.2.min.js'></script>
+3
source

Create a type folder. \ public \ js \ lib \ bootstrap and in the bootstrap folder save two bootstrap-combination.min.css and bootstrap.js files that you can get from the bootstrap repository in. /views/index.html pages include these files as

 <link href="/js/lib/bootstrap/bootstrap-combined.min.css" rel="stylesheet"> <script src="/js/lib/bootstrap/bootstrap.js"></script>

Now it should work for you ....

0
source

Source: https://habr.com/ru/post/1492056/

More articles:


All Articles