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

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:

Faça o download do código fonte do Bootstrap
Baixe e instale o NodeJS
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.
Instale o grunt globalmente (a opção -g) digitando "npm install -g grunt-cli"
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

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