Bootstrap 3.x + sito Web a larghezza fissa

Question

Hello Fellow Developers,

Sto per iniziare un nuovo progetto in cui il nostro cliente è basato negli Stati Uniti. Dopo aver esaminato le linee guida sui requisiti e sulla progettazione, vedo che stanno cercando un sito web a larghezza fissa che supporti principalmente i browser desktop, ma in futuro vedo molte potenzialità che potrebbero desiderare di farlo funzionare su versioni più compatte di ipad di comunicazione, cellulari .

Ho lavorato su bootstrap 2.3 quando è uscito ma dopo un anno era fuori dal bootstrap. Conosco la potenza di bootstrap 2.3 e 3.x in cui sono rivolti in primo luogo ai dispositivi mobili.

La mia domanda è, guardando il punto di vista di cliente che vuole solo per supportare browser desktop, c'è una possibilità ancora posso usare bootstrap per il sito web di larghezza fissa e avere un'apertura per il futuro in cui cliente potrebbe voler porto questo a dispositivi più piccoli. Sembra ragionevole avere questo spazio nella versione corrente. So che non è qualcosa che può essere interpretato senza vedere la complessità delle pagine o dei wireframe. Voglio solo avere un talento di comprensione.

Quale sarà il modo migliore per raggiungere questo obiettivo?

Spero di avere qualche suggerimento su questo fronte.

Answer 1

Non aggiungere metatag per viewport e resto, svilupparlo utilizzando le strutture di bootstrap e utilizzare le classi col-xs, in seguito è ovviamente possibile renderlo reattivo.

Answer 2

Se si desidera utilizzare bootstrap in ogni caso, è possibile:

• fare un responsive design in ogni caso e che avrebbero (probabilmente, non si può mai con i clienti ^^) essere felice del risultato

• commento tutti i mezzi di comunicazione non relative alla larghezza desiderata nella bootstrap css

  /*@media (min-width: 768px) { 
       .container { 
         width: 750px; 
       } 
  } 
  @media (min-width: 992px) { 
       .container { 
         width: 970px; 
       } 
  } 
  @media (min-width: 1200px) {*/ 
       .container { 
         width: 1170px; 
       } 
  /*}*/ 
  

• Bootstrap non-responsive

Non è ben organizzata ma spero che aiuta un po '^^

Answer 3

http://getbootstrap.com/css/#grid-options

Dal bootstrap definisce le griglie si che questo vi aiuterà.

Answer 4

Come si è detto, il bootstrap sottolinea di più su un primo approccio mobile, ma non stabilisce lo stesso per il suo utilizzo.

La bellezza del quadro è che è possibile utilizzarlo in base alle proprie esigenze. Che si tratti di un elemento di dimensioni ridotte nella pagina Web o di un sito Web completo, Bootstrap offre opzioni per personalizzare tutto.

Venendo alla tua situazione, ho sperimentato le stesse molte volte durante la fase di avvio dei miei progetti i.e UI Designing. Indipendentemente dal numero di volte che il client ti dice (questa è solo un'applicazione desktop), come sviluppatore abbiamo una buona idea circa lo scenario di usabilità dei siti web al giorno d'oggi se non è mobile non è lì.

Considerando che non hai fornito dettagli sulla scala e la complessità del tuo sito web, assumerò che sia normale per quanto riguarda l'interfaccia utente. Quindi il mio suggerimento sarebbe di andare avanti con la versione desktop e fare uno scheletro pulito di tutte le pagine in modo che in seguito, se necessario, si possa accogliere la versione mobile.

P.S - L'ho fatto molte volte con l'aiuto di una solida struttura in primo piano.

Answer 5

Il modo in cui lo farei è creare un div che funge da wrapper per l'intera pagina. Impostare una larghezza su quello div e Bootstrap dovrebbe rispondere a tale larghezza. Se ci si imbatte in situazioni in cui potrebbe verificarsi un overflow di div, impostare la larghezza di tale div (o il relativo elemento principale, a seconda del contesto) su width: inherit.

Se la pagina viene visualizzata in un browser desktop, tutto dovrebbe apparire come dovrebbe e mantenere la larghezza fissa. Se è visualizzato su dispositivi mobili, il contenuto può essere modificato in base a come è stato utilizzato il sistema di griglia di Bootstrap, ma dovrebbe farlo in modo reattivo ed elegante.

Answer 6

Vorrei andare avanti e stendere il sito utilizzando il sistema di griglia Bootstrap standard. Non hai l'obbligo di utilizzare il CSS Bootstrap e potresti:

1. Non caricare affatto i CSS di Bootstrap e definire tu stesso le dimensioni del layout.
2. Personalizza il CSS Bootstrap (vedere http://getbootstrap.com/customize/) e disattiva il sistema di rete.

Quest'ultimo approccio ti darà almeno il familiare aspetto di Bootstrap senza la funzione di risposta e non dovrai creare lo stesso stile da solo.

Answer 7

È possibile eseguire questa operazione, in primo luogo rimuovere la reattività del bootstrap (seguire il collegamento). Disable responsiveness

Come da linee guida di avvio (collegamento collegato). Devi sovrascrivere la larghezza del contenitore secondo il tuo progetto. Tutto è impostato e anche quando vuoi rendere reattivo solo poche modifiche da fare. Sto usando l'approccio molto tempo.

Answer 8

Abbiamo avuto un problema simile. La nostra soluzione era disabilitare xs e sm css (cioè forzare tutti gli schermi a usare gli schermi md o lg).

Questo ha funzionato bene perché i dispositivi mobili sono già in grado di eseguire il rendering di siti Web di dimensioni maggiori. Ricorda come sono stati resi i siti web dall'iPad quando è uscito per la prima volta? Devi zoomare per leggere le cose, ma tutto funziona ancora.

Il modo più semplice per disattivare xs e SM sta usando il customizer bootstrap (http://getbootstrap.com/customize/):

• Caricare il config.json
• Impostare la @ impostazione per essere screen-sm-min "(@screen -SM/10)"
• impostare la @ impostazione per essere screen-md-min "(@ screen-md/10)"

in pratica questo significa che si visualizza xs se la dimensione dello schermo è inferiore a circa 65 px di larghezza e sm se lo schermo it è inferiore a 100px (cosa che non dovrebbe mai accadere).

Se non si dispone di un config.json diventa più difficile in quanto queste variabili vengono utilizzate ampiamente nel CSS di bootstrap. Ho appena controllato e ho trovato 53 linee che dovevano cambiare se volevi farlo manualmente ... Non impossibile, ma vorresti fare molta attenzione.

Ancora, lo consiglio vivamente su un nuovo sistema in cui non si desidera provvedere ai dispositivi mobili (almeno non principalmente).