Bootstrap学习(二)

1、div样式：

container 固定宽度并且具有响应式

container-fluid自由宽高(100%)

jumbotron 超大屏幕

row 行

col-sm-3 列数: 12意味了占满12个列，即全屏宽度（如果是6则占一半）

<div class="container"></div>
<div class="container"></div>

//带有边距和圆角效果
<div class="container">
<div class="jumbotron">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置窗口大小，查看响应式效果！</p>
</div>
</div>

//不带有边距和圆角效果
<div class="jumbotron">
<div class="container">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置窗口大小，查看响应式效果！</p>
</div>
</div>

<div class="row">
<div class="col-sm-3">
<h3>第一列</h3>
<p>学的不仅是技术，更是梦想！</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
</div>
<div class="col-sm-3">
<h3>第二列</h3>
<p>学的不仅是技术，更是梦想！</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
</div>
<div class="col-sm-3">
<h3>第三列</h3>
<p>学的不仅是技术，更是梦想！</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
</div>
<div class="col-sm-3">
<h3>第四列</h3>
<p>学的不仅是技术，更是梦想！</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
</div>
</div>

2、文本样式：

text-left 文本左对齐

text-right 文本右对齐

text-center 居中对齐

text-justify 两端对齐

<h1 class="text-center">早安</h1>
//字体大小
<font class="h1">行内块样式</font>

3、列表样式：

list-inline 行内块

list-unstyled 无符号，去掉前面的符号

//行内块
<ul class="list-inline">
<li>HTML</li>
<li>CSS</li>
<li>JAVA</li>
</ul>

//无符号，去掉前面的符号
<ul class="list-unstyled">
<li>HTML</li>
<li>CSS</li>
<li>JAVA</li>
</ul>

4、table样式：

table 表格全局样式（少量padding和水平方向的分割线）

table-striped 有条纹的背景色行（隔行变色）

table-bordered 带边框的表格

table-hover 鼠标悬听效果

table-condensed 紧凑的表格

<table class="table"></table>

//表格边框
<table class="table table-striped table-bordered">

table行或单元格背景色样式：

active

success

info

warning

danger

<tr class="active">
<td class="active">

响应式table：将table元素包裹在table-responsive元素内，即可创建响应式表格

<div class="table-responsive">
<table class="table table-hover table-condensed">
<tr class="active">
<td>编号</td>
<td>新闻标题</td>
<td>发布者</td>
<td>发布时间</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>

5、form样式

form-group 表单组样式 ，将和表单元素包含其中，可以获得更好的排列

form-inline 可以使元素一行排列，用于form元素

form-control 表单元素样式，常用于，等元素

placeholder 用于

radio-inline 可以使一组单选框排列在同一行

checkbox-inline 可以使一组复选框排列在同一行

sr-only 可以用于隐藏元素

<!--form-inline 是表格横向排列-->
<form class="form-inline">
<div class="form-group">
<!--sr-only 设置隐藏-->
<label for="username" class="sr-only">用户名:</label>
<input type="text" class="form-control" id="username" placeholder="请输入您用户名">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="text" class="form-control" id="password" placeholder="请输入您的密码">
</div>
</form>