Como usar o bootstrap-theme.css com o bootstrap 3?

174

Depois de baixar um pacote completo de bootstrap 3 em http://getbootstrap.com , notei que há um arquivo css separado para o tema. Como fazer uso dele? Por favor explique?

Incluí bootstrap-theme.cssno meu projeto de inicialização existente, mas não há diferença na saída.

html css twitter-bootstrap-3 Yuvaraj P
fonte

Respostas:

382

Ao baixar o Bootstrap 3.x, você obterá o bootstrap.css e o bootstrap-theme.css (sem mencionar as versões compactadas desses arquivos que também estão presentes).

bootstrap.css

bootstrap.cssestá completamente estilizado e pronto para uso, se esse for o seu desejo. Talvez seja um pouco simples, mas está pronto e está lá.

Você não precisa usar o bootstrap-theme.css se não quiser e tudo ficará bem.

bootstrap-theme.css

bootstrap-theme.cssé exatamente o que o nome do arquivo está tentando sugerir: é um tema para a inicialização que é considerado criativamente 'O tema da inicialização'. O nome do arquivo confunde as coisas um pouco, já que a base bootstrap.cssjá possui estilo aplicado e eu, por exemplo, consideraria esses estilos o padrão. Mas essa conclusão é aparentemente incorreta à luz do que foi dito na seção de exemplos da documentação do Bootstrap em relação a este bootstrap-theme.cssarquivo:

"Carregue o tema opcional do Bootstrap para uma experiência visualmente aprimorada."

A citação acima pode ser encontrada aqui http://getbootstrap.com/getting-started/#examples em uma miniatura vinculada a este exemplo de página http://getbootstrap.com/examples/theme/ . A ideia é que bootstrap-theme.cssé O tema de inicialização e é opcional.

Temas em BootSwatch.com

Sobre os temas no BootSwatch.com: Esses temas não são implementados como bootstrap-theme.css. Os temas do BootSwatch são versões modificadas do original bootstrap.css. Portanto, você definitivamente NÃO deve usar um tema do BootSwatch E o bootstrap-theme.cssarquivo ao mesmo tempo.

Tema personalizado

Sobre o seu próprio tema personalizado: você pode optar por modificar bootstrap-theme.cssao criar seu próprio tema. Fazer isso pode tornar mais fácil fazer alterações no estilo sem quebrar acidentalmente qualquer uma dessas qualidades internas do Bootstrap.

sagacidade
fonte
68
Essa deve ser a resposta selecionada.
Patrick Cullen
11
Aviso sobre o Bootswatch.com é muito útil. Obrigado.
Daniel Kmak 07/07
@ Daniel ... mas deve ser reformulado de acordo com twbs / inicialização nova direção para ter uma estável, característica consistente aos seus clientes temáticos
Luca G. Soave
O arquivo bootstrap-theme.css não é mais uma substituição, ou seja, o bootstrap.css o configura de tal maneira que você pode usá-lo com todo o estilo relevante. O Bootstrap-theme.css existe para substituir estilos SEM alterar o arquivo CSS base. A importância aqui é que, se você atualizar para o bootstrap XX, substitua o arquivo css base e não precisará se preocupar em perder todas as suas personalizações. Você pode precisar ajustar o arquivo do tema, mas isso é muito menos preocupante. Talvez o que você estava dizendo.
23416 Jacques
2
O mais confuso é que, se você usar o recurso Personalização no site de inicialização ( getbootstrap.com/customize ), colocará suas personalizações no arquivo bootstrap.css e não no arquivo de tema. Essa página também não contém opções para modificar nada relacionado ao The Theme (tm). Tanto quanto posso ver, o arquivo do tema adiciona um monte de gradientes e sombras por todo o lado e faz pouco mais.
C.List
90

Para um exemplo dos estilos css, consulte: http://getbootstrap.com/examples/theme/

Se você quiser ver como o exemplo fica sem o arquivo bootstrap-theme.css, abra as ferramentas de desenvolvedor do navegador e exclua o link do <head> do exemplo e, em seguida, você poderá compará-lo.

Eu sei que essa é uma pergunta antiga, mas a postei para o caso de alguém procurar um exemplo de como ela era.

Atualizar

bootstrap.css = estrutura principal do CSS (grades, estilos básicos, etc)

bootstrap-theme.css= estilo estendido (botões 3D, gradientes etc.). Este arquivo é opcional e não afeta a funcionalidade do bootstrap, apenas aprimora a aparência.

Atualização 2

Com o lançamento da v3.2.0, o Bootstrap adicionou uma opção para visualizar o tema css nas páginas de documentos. Se você for a uma das páginas do documento ( css , componentes , javascript ), verá um link "Visualizar tema" na parte inferior da navegação lateral, que pode ser usado para ativar e desativar o tema css.

joshhunt
fonte
Obrigado por nos acompanhar, pois sua resposta fez mais sentido. Fiquei me perguntando, você simplesmente substituiria o conteúdo de bootstrap.cssum tema de Bootswatch.com, como o site diz e ainda poderia usar bootstrap-theme.cssmesmo com um tema de Bottswatch?
Paladino Refratado #
3
bootstrap.css = estrutura principal do CSS (grades, estilos básicos, etc.) bootstrap-theme.css = estilo estendido (botões 3D etc.) Eu nunca o usei, mas apenas dei uma olhada nele e o Bootswatch parece editar o arquivo bootstrap.css para atender às próprias necessidades. Portanto, para usar tudo o que você precisa fazer é baixar o arquivo bootstrap.css do Bootswatch e usá-lo. Não use o bootstrap-theme.css, pois provavelmente entrará em conflito com o css do Bootswatch.
Joshhunt #
Obrigado cara, agradeço a resposta! Foi o que notei também, mas não havia voltado aqui. Sem modificação, você não consegue usar o bootstrap-themeBootswatch. Isso fez uma bagunça no meu site de qualquer maneira.
Paladin Refractado 03/03
72

Primeiro, bootstrap-theme.cssnada mais é equivalente ao estilo do Bootstrap 2.x no Bootstrap 3. Se você realmente deseja usá-lo, basta adicioná-lo AO LONGO com bootstrap.css(a versão reduzida também funcionará).

androphone
fonte
4
Lembre-se de que, se você usar arquivos CSS de tema de inicialização, é melhor comentar o arquivo bootstrap-theme.css oficial.
Cheung
163
Como é que isso é uma resposta aceita? Nem sequer é uma resposta. Desculpe. Tudo isso está dizendo é o equivalente ao arquivo no Bootstrap 2 e qualquer pessoa que não esteja familiarizada com o Bootstrap 2 agora precisará procurar outra resposta para descobrir o que esse arquivo faz.
Mario Awad
4
Mas é tudo, o que eu quero saber.
Uladzimir
9
Concorde com @MarioAwad, esta não é uma resposta. Também é confuso, pois eu pensei que era apenas o suporte do antigo Bootstrap css, o que é apenas parcialmente verdadeiro.
Yannis Dran
1
Na BS 3.2, incluir o tema CSS realmente altera a aparência adicionando sombras 3D a botões e outras coisas. Veja a resposta de joshhunt para obter detalhes.
RajV
31

Bootstrap-theme.css é o arquivo CSS adicional, que é opcional para você usar. Dá efeitos 3D nos botões e em alguns outros elementos.

Jowen
fonte
14

Conforme declarado por outros, o nome de arquivo bootstrap-theme.css é muito confuso. Eu teria escolhido algo como o bootstrap-3d.css ou o bootstrap-fancy.css, que seria mais descritivo do que ele realmente faz. O que o mundo vê como um "Tema Bootstrap" é algo que você pode obter do BootSwatch, que é uma fera totalmente diferente.

Com isso dito, os efeitos são bastante agradáveis ​​- gradientes e sombras e tal. Infelizmente, esse arquivo causará estragos nos temas do BootSwatch, então decidi investigar o que seria necessário para torná-lo agradável.

MENOS

Bootstrap-theme.css é gerado a partir do arquivo theme.less na fonte Bootstrap. Os elementos afetados são (a partir do Bootstrap v3.2.0):

  • Lista de itens
  • Botões
  • Imagens
  • Dropdowns
  • Navbars
  • Alertas
  • Barras de progresso
  • Grupos de listas
  • Painéis
  • Wells

O arquivo theme.less depende de:

@import "variables.less";
@import "mixins.less";

O código usa cores definidas em variable.less em vários lugares, por exemplo:

// Give the progress background some depth
.progress {
    #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

É por isso que o bootstrap-theme.css estraga totalmente os Temas do BootSwatch. A boa notícia é que os Temas do BootSwatch também são criados a partir de arquivos variable.less, para que você possa simplesmente criar um bootstrap-theme.css para o seu Tema do BootSwatch.

Construindo o bootstrap-theme.css

A maneira certa de fazer isso é atualizar o processo de criação do Tema, mas aqui está a maneira mais rápida e suja. Substitua o arquivo variable.less na fonte do Bootstrap pelo do seu tema Bootswatch e construa-o e pronto, você tem um arquivo bootstrap-theme.css para o seu tema Bootswatch.

Construindo o próprio Bootstrap

A criação do Bootstrap pode parecer assustadora, mas na verdade é muito simples:

  1. Faça o download do código fonte do Bootstrap
  2. Baixe e instale o NodeJS
  3. Abra um prompt de comando e navegue até a pasta de origem da inicialização. Digite "npm install". Isso adicionará a pasta "node_modules" ao projeto e fará o download de todo o material do Node necessário.
  4. Instale o grunt globalmente (a opção -g) digitando "npm install -g grunt-cli"
  5. Renomeie a pasta "dist" para "dist-orig" e depois reconstrua-a, digitando "grunt dist". Agora verifique se há uma nova pasta "dist" que contém tudo o que você precisa para usar sua compilação personalizada do Bootstrap.

Feito. Veja, isso foi fácil, não foi?

Esse cara
fonte
2

Eu sei que este post é meio antigo, mas ...

  Como 'espirituoso' apontou.

Sobre o seu próprio tema personalizado Você pode modificar o bootstrap-theme.css ao criar seu próprio tema. Fazer isso pode tornar mais fácil fazer alterações no estilo sem quebrar acidentalmente qualquer uma dessas qualidades internas do Bootstrap.

  Eu vejo isso como o Bootstrap viu ao longo dos anos que todo mundo quer algo um pouco diferente dos estilos principais. Embora você possa modificar o bootstrap.css, isso pode quebrar as coisas e tornar a atualização para uma versão mais recente uma verdadeira dor e consome tempo. Fazer o download de um site de 'temas' significa que você precisa esperar se o criador atualizar esse tema, grande se for o caso , certo?

  Alguns constroem seu próprio arquivo 'custom.css' e tudo bem, mas se você usar 'bootstrap-theme.css', muitas coisas já serão criadas e isso permitirá que você role seu próprio tema mais rapidamente 'sem' interromper o núcleo do bootstrap .css. Eu não gosto dos botões e gradientes 3D na maioria das vezes, então altere-os usando o bootstrap-theme.css. Adicione margens ou preenchimento, altere o raio dos botões e assim por diante ...

user1946683
fonte