Добавить правила CSS с Twitter Bootstrap

Я не знаю, как использовать CSS. Поэтому я спрашиваю здесь. Я создаю страницу JSP. Я добавил две таблицы на странице JSP, используя Twitter Bootstrap. Мне нужно добавить другое выравнивание для обеих таблиц. Поскольку я использую bootsrap, обе таблицы имеют одинаковое выравнивание.Добавить правила CSS с Twitter Bootstrap

Это мой код

<div> 
<table class="table table-bordered source"> 
//table 1 contents 
</table> 
</div> 

<div> 
<table class="table table-hover target"> 
//table 2 contents 
</table> 
</div>

Я хочу, чтобы выровнять текст по центру для таблицы 1 и слева для таблицы 2. Таблица 2 заголовка должна быть alinged к центру и таблица 2 boreder должна быть синего цвета.

Так что я попробовал этот CSS

.table.table-hover.target td { 
     text-align: left !important; 
    } 

    .table.table-hover.target th { 
     text-align: right !important; 
    } 

    .table.table-bordered.source td 
    { 
     text-align: center !important; 
    } 
    .table.target 
    { 
      border-color:blue; 
    }

Это не работает. Когда я даю

.table td 
{ 
    text-align:left !important; 
}

она выравнивает и содержимое таблицы налево. Я не сейчас CSS. Как написать правило CSS?

источник

2013-04-22 Anonymous

Почему вы добавляете стиль выравнивания текста к '.table td'? Что случилось с первыми правилами CSS, которые вы дали? – bozdoz

вы, вероятно, что-то вроде этого:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=utf-8 /> 
    <title>Your page</title> 
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> 
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 

    ... 

    <script src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script> 
</body> 
</html>

прямо под bootstrap-responsive.css (или, если вы не используете адаптивный макет, вы даже не будете использовать этот файл, ведьма затем будет ниже bootstrap.css вызова).

добавить новый файл как:

<link href="/assets/css/application.css" rel="stylesheet" type="text/css" />

и добавить все правила переопределения в этот файл, приведенный выше код будет выглядеть следующим образом:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=utf-8 /> 
    <title>Your page</title> 
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> 
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> 
    <link href="/assets/css/application.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 

    ... 

    <script src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script> 
</body> 
</html>

линии "/assets/css/application.css" будет сказать, что ваш код будет быть в этом конкретном ключе, изменить его для ваших нужд

Комментарии:

Не забывайте комментировать ваши правила CSS, так что другие (и даже вы в 6 месяцев времени, например) будет понять, почему вы написали, что ... в CSS вы можете добавить комментарии заверните /* ... */

, например:

/* TABLES OVERRIDE: so they look like the main theme */ 
.table td 
{ 
    text-align:left !important; 
}

источник

2013-04-22 06:09:08 balexandre

Добавить правила CSS с Twitter Bootstrap

ответ

Смежные вопросы