Jak Bootstrap wyglądają bardziej „Compact”

Chcę mieć taki sam wygląd „Compact” - w kategoriach font-size, padding i ogólnego wykorzystania przestrzeni, jak uzyskać, gdy używam przeglądarki Zoom-out (Ctrl--) . Oczywiście bez efektów ubocznych najważniejsze jest zmniejszenie szerokości kontenera.Jak Bootstrap wyglądają bardziej „Compact”

Próbowałem błahy z @baseFontSize i @baseLineHeight zmiennych w ekranie http://getbootstrap.com/2.3.2/customize.html pobierania Bootstrap, ale brakuje mi czegoś w rezultacie:

Nie wygląda prawo - pod względem równowagi, wyściółka nie jest w porządku .
Przerwy na ekranie projektora (horror!) - wybierz pola, układ, wszystko szaleje.

Proszę mnie uratować!

Źródło

2013-09-03 Ali Zaidi

Jeśli dobrze rozumiem Twoje pytanie, na zmniejszeniu chcesz zachować zachowanie tekstu bez zmian, ale również zachować szerokość kontenera tak samo? Oczywistym jest, że pomniejszenie zmniejsza szerokość kontenera, chyba że używasz 100% szerokości lub dostosowujesz rozmiar za pomocą javascript (zobacz Dysk Google). Polecam dostarczenie strony internetowej lub skrzypce i wyjaśnienie, co chcesz osiągnąć w rzeczywistym projekcie. –

@maremp Wspomniałem o pomniejszeniu przeglądarki, ponieważ jest ona ściśle skorelowana z pożądanym efektem końcowym, tj. Zmniejszeniem rozmiaru i miejsca (wypełnianie pól, komórek tabeli itp.) Przy zachowaniu właściwych proporcji. W miarę rozwoju rozwiązań miałem nadzieję, że zrobię to w CSS, a nie w JavaScript, ponieważ w istocie nie szukam dynamizmu. Dlatego nie napisałem skrzypce. Dziękuję za komentarz, ale pozwoliło mi to wprowadzić większą jasność do tabeli (miejmy nadzieję). –

Zastanawiam się, czy jest to problem związany z responsywnym arkuszem stylów. Trudno podać jednoznaczną odpowiedź, nie wiedząc, czy pracujesz z responsywnym arkuszem stylu, czy bez niego. Ale jeśli tak, układ nie pozostanie proporcjonalny do większego ekranu, ponieważ jest responsywny. Jeśli masz ten arkusz stylu, spróbuj go usunąć.

Źródło

2013-10-02 14:16:51 innerurge1

Kiedy mówię, że łamie się na ekranie projektora, mam na myśli poszczególne elementy, a nie ogólny układ. Na przykład, manipulowanie baseFontSize sprawi, że dane wejściowe wyglądają dziwnie, ponieważ tekst nie jest już wyrównany do środka w pionie. Jeśli następnie skrzypię z baseLineHeight, tekst będzie prawidłowy, ale strzałka po prawej stronie wybranych skrzynek zepsuje się. –

Mam dwie sugestie.

Po pierwsze, używasz Bootstrap 2.3.2 za powyższy link powyżej? Możesz łatwiej rozwiązywać swoje problemy, używając nowego rusztowania, które posiada boostrap 3.0 (i nowsze). Ulepszanie witryny jest trochę uciążliwe, ale istnieją automatyczne konwertery, a nowy system jest DUŻO lepszy do pracy i może pomóc.

Po drugie, kolejną sztuczką CSS, którą powinieneś sprawdzić, jest grubość czcionki i wysokość linii. Czcionka może sprawić, że tekst będzie cieńszy/grubszy (oceny to 100, 200, 300, 400 itd.). Możliwe, że czcionka będzie cieńsza, linia będzie niższa, ale ogólna czcionka większa, co "zwiąże" rzeczy. Jeśli nie wiesz, że warto spróbować.

font-weight: 200; 
    line-height: 30px;

Źródło

2014-04-16 23:30:38 Gu3miles

Nie, kombinacja grubości czcionki i linii wysokości nie zapewnia pożądanego efektu. –

Jak Bootstrap wyglądają bardziej „Compact”

Odpowiedz

Powiązane problemy