Twitter bootstrap sur Node.js et Express

Comment puis-je utiliser Twitter Bootstrap sur Node.js et Express?Twitter bootstrap sur Node.js et Express

Je sais que je dois mettre des fichiers CSS et Javascript dans le répertoire ./public (s'il est défini par défaut). Mais quand je cherche comment utiliser Twitter Bootstrap sur Node.js et Express, je sais qu'il existe de nombreuses variantes sur l'utilisation de Twitter Bootstrap.

Par exemple, il suffit de mettre CSS bootstrap et les fichiers JS dans les répertoires appropriés, ou préciser:

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

etc, et aussi il y a deux sources, fichiers normaux et .min.css, chacun avec CSS et JS. Alors, comment puis-je servir le fichier Bootstrap approprié dans Node.js et Express?

Voici quelques premières lignes de mon code actuel (est-ce nécessaire?), Qui ne fonctionne pas avec responsive design (il ne s'empile pas verticalement lorsque je rétrécis l'écran pour imiter la taille des smartphones) baisse de la taille avec chaque ratio étant le même).

<!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>

Source

2013-07-18 Blaszard

double possible de [fichiers statiques avec express.js] (http://stackoverflow.com/questions/10434001/static-files-with-express-js) – moka

Créez un sous-dossier dans le dossier public et nommez-le comme stylesheets.Then mettre tous vos twiter fichiers bootstraper css dans ce dossier de stylesheets.Alors vous pouvez lier le fichier comme ci-dessous.Sui e même pour les fichiers js aussi.

<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>

Source

2013-07-18 10:39:27 sachin

Je veux vous demander pourquoi vous utilisez '. min.css' pour le premier mais '.css' pour le second fichier? J'ai aussi 'bootstrap.css' et' bootstrap-responsive.min.css' ... Comment puis-je choisir lequel utiliser? Merci. – Blaszard

@ user2360798 Première utilisation 'bootstrap.min.css' (version réduite de bootstrap.css), puis utilisation de bootstrap-responsive.min.css (version réduite de bootstrap-responsive.css); – sachin

Créez un dossier comme. \ Public \ js \ lib \ bootstrap et dans le dossier d'amorçage garder les deux fichiers d'amorçage-combined.min.css et bootstrap.js WHIC vous pouvez obtenir à partir du référentiel bootstrap l'en. Page /views/index.html comprennent les fichiers comme

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

il devrait maintenant travailler pour vous ....

Source

2013-07-18 10:33:34

Twitter bootstrap sur Node.js et Express

Répondre

Questions connexes