页面大块布局:

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. php实现socket简单的例子

    一.Socket简介 1.socket只不过是一种数据结构 2.使用这个socket数据结构去开始一个客户端和服务器之间的会话 3.服务器是一直在监听准备产生一个新的会话.当一个客户端连接服务端,它就 ...

  2. 前端切图要选择png和jpg呢?

    今天特意验证了一下: 切完图分别保存png24.png8和jpg60.jpg80(60和80表示保存图片时品质选择)后, 然后再压缩图片,压缩图片地址:https://tinypng.com/ 图片直 ...

  3. lamp-linux-1

    LAMP编程之Linux(1) LAMP:Linux Apache MySQL PHP LNMP:Linux Nginx MySQL PHP WAMP:Windows Apache MySQL PHP ...

  4. Elasticsearch入门CRUD(新增、查询、修改、删除)

    1. 项目中引用 Elasticsearch.NET         Elasticsearch 其他版本可在: http://www.nuget.org/  找到对应的项目以源码 ! 本文以 2.4 ...

  5. 浅谈HashMap原理,记录entrySet中的一些疑问

    HashMap的底层的一些变量: transient Node<K,V>[] table; //存储数据的Node数组 transient Set<java.util.Map.Ent ...

  6. Python 的 GIL 是什么鬼,多线程性能究竟如何

    作者:卢钧轶(cenalulu) 本文原文地址: http://cenalulu.github.io/python/gil-in-python/ 前言:博主在刚接触Python的时候时常听到GIL这个 ...

  7. centos7安装配置sql server 2017 linux教程

    一.安装教程 https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-docker https://docs.mic ...

  8. Tomcat启动和请求处理解析

    tomcat是我们经常使用的组件,但是内部是如何运行的呢,我们去一探究竟. 1.tomcat架构 tomcat的整体架构图如下: Tomcat中只有一个Server,一个Server可以有多个Serv ...

  9. 「PKUWC2018」Slay the Spire

    题目链接 题意分析 这个题其实不是期望 就是一共有\(C_{2n}^m\)种情况 每一种情况选择\(k\)张牌 然后求最大攻击值的总和 我们考虑 当前抽出了选出了\(i\)张强化牌 \(m-i\)张攻 ...

  10. PHP中引入文件的四种方式详解

    四种语句 PHP中有四个加载文件的语句:include.require.include_once.require_once. 基本语法 require:require函数一般放在PHP脚本的最前面,P ...