CSSを使用せずにブートストラップでデータテーブルのヘッダとデータを使用する方法はありますか？

Question

私はasp.net mvc4とブートストラップを学び始めています。これまではこのDataテーブルを作成していました。私はSite.cssのmvc4の現在のデフォルトCSSを使用しています。ヘッダを(Name)とデータ(A B C D)の中央に配置するにはどうすればいいですか？ CSSでそれを編集する方法ができない場合は？私はcss

における基本的な知識を持っていることはここではCSSを使用したスタイリングHTMLの最高/好ましい方法である私のJS

var globalPersonId = 1; 
var dataTablesOrderedList = ""; 
$(document).ready(function() { 

var dataTablesFirstBS = $('#dataTables-FIrstSample').DataTable({ 
    responsive: true, 
    processing: true, 
    info: true, 
    search: true, 
    stateSave: true, 
    order: [[1, "asc"]], 
    lengthMenu: [[50, 100, 200, -1], [50, 100, 200, "All"]], 
    ajax: { "url": "/BS/GetFirstDataTable" }, 
    columns: 
    [ 
     { data: "BSId", title: "", visible: false, searchable: false, sortable: false }, 
     { data: "Name", title: "Name", sClass: "alignCenter", sortable: false }, 
     { 
      data: "ActionMenu", title: "Sample Button", width: "100px", sAlign: "alignCenter", searchable: false, orderable: false, sClass: "alignCenter", 
      "mRender": function (data) { 
       return '<button type="button" class="btn btn-info btn-xs action" id="btnAddToCart_' + data + '"><i class="glyphicon glyphicon-cutlery glyphicon-fw action"></i></button>'; 
      } 
     } 
    ] 
}); 

// MyFirstBS(); 
function MyFirstBS() { 

    dataTablesOrderedList = $('#tblMyFirstBS').DataTable({ 
     responsive: true, 
     processing: true, 
     info: true, 
     retrieve: true, 
     destroy: true, 
     search: true, 
     stateSave: true, 
     lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]], 
     ajax: { 
      "url": "/BS/GetFirstDataTable", 
      "data": function (d) { 
       d.BSId = globalPersonId; 
      } 
     }, 
     columns: 
    [ 
     { data: "BSId", title: "", visible: false, searchable: false, sortable: false }, 
     { data: "Name", title: "Name", searchable: false, sortable: false } 
    ] 
    }); 
    } 
    }); 

Answer 1

の私のコードです。水平テキストの配置については

は、ブートストラップは、いくつかのヘルパーCSSクラスを持っています

<p class="text-left">Left aligned text.</p> 
<p class="text-center">Center aligned text.</p> 
<p class="text-right">Right aligned text.</p> 

出典：

：あなたがあなた自身のヘルパーCSSクラスを作成し、それらを使用することができ、テーブルセルの位置合わせのための http://getbootstrap.com/css/#type-alignment

.text-top { 
    vertical-align: top; 
} 
.text-middle { 
    vertical-align: middle; 
} 
.text-bottom { 
    vertical-align: bottom; 
} 

また、カスタムCSSクラスをデータテーブルに追加することもできます。

<table class="example-class"> ... </table> 

そして、あなたの細胞をスタイルするためにそれを使用：

.example-class th { 
    vertical-align: middle; 
} 
.example-class td { 
    vertical-align: top; 
}