首页 > Web开发 > 详细

bootstrap 全局 CSS 样式

时间:2014-07-26 00:03:06      阅读:383      评论:0      收藏:0      [点我收藏+]

概览

布局容器

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

这两种 容器类不能互相嵌套

栅格系统

简介

“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中

你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>


排版

内联文本元素

<mark>标记文本 <del>删除线 <s>无用 <ins>插入 <u>下划线 <small>小号文本 <strong>强调 <em>斜体

<b>高亮 <i>技术词汇

对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

改变大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

代码

 

表格

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

 

表单

基本实例

内联表单

水平排列的表单

被支持的控件

输入框

文本域

多选和单选框

下拉列表(select)

 

按钮

预定义样式

尺寸

按钮类

为 <a><button> 或 <input> 元素应用按钮类。

 

图片

图片形状

通过为 <img> 元素添加以下相应的类,可以让图片呈现不同的形状。

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

原文地址

bootstrap 全局 CSS 样式,布布扣,bubuko.com

bootstrap 全局 CSS 样式

原文:http://www.cnblogs.com/yy2056/p/3868209.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!