页面大块布局:

div.container

栅格系统:

一行分成 12 列

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

图片自动生成:

<img src="holder.js/100%x300">

文本对齐:

p.text-left;
p.text-center;
p.text-right;

块标签对齐:

div.pull-left;
div.pull-right;
div.center-block;

排版样式:

h1.page-header
p.lead
small
strong
em

文字的颜色(带有样式划动效果):

p.text-muted 柔和色
p.text-primary 浅蓝色
p.text-success 深绿色
p.text-info 深蓝色
p.text-warning 棕色
p.text-danger 红色

列表:

.list-unstyled  去掉项目符号和默认的padding值
.list-inline 将列表内容排列成同一行并增加少量padding值
.dl-horizontal 将dt标记与dd描述内容排列在同一行

表格样式:

table.table 表格
table.table-hover 鼠标悬浮
table.table-bordered 表格边框
table.table-striped 隔行换色
table.table-condensed 紧凑性表格

状态类:

tr.active 灰
tr.danger 红
tr.warning 黄
tr.success 绿

响应式表格( 水平滚动条):

div.table-responsive

表单样式:

div.form-group
<div class="form-group">
<label for="nameid">name: </label>
<input type="text" id="nameid" class="form-control input-lg">
</div>

表单元素:

input.form-control
input.input-lg

表单尺寸:

.input-lg
.input-sm

表单颜色:

div.has-success
div.has-error
div.has-warning

多选框:

<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>

单选框:

<div class="radio">
<label>
<input type="radio"> Check me out
</label>
</div>

水平多选框:

<div class="radio-inline">
<label>
<input type="radio" name='rname'> Check me out
</label>
</div>

下拉选:

显示和隐藏:

.show
.hidden
.sr-only

按钮:

1.button
2.input type=button
3.input type=submit
4.input type=reset
5.a 标签

七种样式:

.btn btn-default
.btn btn-primary
.btn btn-success
.btn btn-info
.btn btn-warning
.btn btn-danger
.btn btn-link

按钮尺寸:

.btn-lg
.btn-sm
.btn-xs

按钮变成块元素:

.btn-block

按钮的活动状态:

.active

按钮的禁用状态:

.disabled

img 图片:

.img-rounded 圆角矩形
.img-circle 圆形
.img-thumbnail 圆角边框

img 响应式图片:

.img-responsive

关闭按钮:

span.close

向下箭头:

span.caret

一:Bootstrap-css样式的更多相关文章

  1. 学习BootStrap3.3.4——敲完全局CSS样式

    历时7小时- -(算上晚饭)终于敲完BootStrap CSS样式部分.还是第一次这么持久的敲纯前端,连JS都没有. 正好趁这机会熟悉了Sublime,主要是各个快捷键的用法.目前用到最多的: 而且s ...

  2. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  3. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  4. [bootstrap] 基本css样式和组件

    一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...

  5. Bootstrap入门(三)<p>标签的css样式

    Bootstrap入门(三)<p>标签的css样式 前提:引入css文件,内容放在一个class为container的div中   <p>标签属性 1.“ text-left ...

  6. bootstrap之css样式

    一 bootstrap的介绍 Bootstrap是将html,css和js的代码打包好了,只管我们拿来调用.是基于jquery开发的. 使用BootCDN提供的免费CDN加速服务,同时支持http和h ...

  7. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  8. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  9. bootstrap全局css样式

    以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...

  10. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

随机推荐

  1. P3357 最长k可重线段集问题 网络流

    P3357 最长k可重线段集问题 题目描述 给定平面 x-O-yx−O−y 上 nn 个开线段组成的集合 II,和一个正整数 kk .试设计一个算法,从开线段集合 II 中选取出开线段集合 S\sub ...

  2. jzoj1792

    #include<bits/stdc++.h> using namespace std; long long a[100010],m,n; int main(){ scanf(" ...

  3. jmeter+ant+jenkins+mac报告优化(一):解决Min Time和Max Time显示NaN

    一.在上篇博客中生成的报告有两个问题: 1.date not defined 2.Min Time和Max Time显示成了NaN 二.Jmeter+Ant报告生成原理: 1.在Jmeter的extr ...

  4. Generating an arbitrary digit password dictionary

    原理说明:以增量方式从开始到结束! 实现方法:CMD命令 特点:纯数字 语法: FOR /L %variable IN (start,step,end) DO command [command-par ...

  5. pandas.concat连接dataframe

    https://blog.csdn.net/stevenkwong/article/details/52528616

  6. 总结day23 ---- 网络编程,以及计算机基础概念

    计算机网络的发展及基础网络概念 问题:网络到底是什么?计算机之间是如何通信的? 早期 : 联机 以太网 : 局域网与交换机 广播 主机之间“一对所有”的通讯模式,网络对其中每一台主机发出的信号都进行无 ...

  7. SHELL脚本扩展

    使用SED命令 sed称为流编辑器,命令格式如下: sed option script file -e script #指定多个命令 -f script_file #指定命令文件 -n #不需要为每个 ...

  8. mysql导入大批量数据出现MySQL server has gone away的解决方法

    因工作需要,需要导入一个200M左右的sql到user库 执行命令 mysql> use user Database changed mysql> source /tmp/user.sql ...

  9. Java将\替换成/

    public static void main(String[] args) { String str="upload\\media\\201904\\i4Qjz8E40xGQovUq-2C ...

  10. Vijos 小胖的奇偶

    第一遍做 #include<iostream> #include<cstdlib> #include<cstdio> #include<cstring> ...