一:Bootstrap-css样式
页面大块布局:
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样式的更多相关文章
- 学习BootStrap3.3.4——敲完全局CSS样式
历时7小时- -(算上晚饭)终于敲完BootStrap CSS样式部分.还是第一次这么持久的敲纯前端,连JS都没有. 正好趁这机会熟悉了Sublime,主要是各个快捷键的用法.目前用到最多的: 而且s ...
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
- bootstrap学习总结-css样式设计(一)
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭 ...
- [bootstrap] 基本css样式和组件
一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...
- Bootstrap入门(三)<p>标签的css样式
Bootstrap入门(三)<p>标签的css样式 前提:引入css文件,内容放在一个class为container的div中 <p>标签属性 1.“ text-left ...
- bootstrap之css样式
一 bootstrap的介绍 Bootstrap是将html,css和js的代码打包好了,只管我们拿来调用.是基于jquery开发的. 使用BootCDN提供的免费CDN加速服务,同时支持http和h ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- 响应式布局和BootStrap 全局CSS样式
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- bootstrap全局css样式
以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...
- 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
随机推荐
- php实现socket简单的例子
一.Socket简介 1.socket只不过是一种数据结构 2.使用这个socket数据结构去开始一个客户端和服务器之间的会话 3.服务器是一直在监听准备产生一个新的会话.当一个客户端连接服务端,它就 ...
- 前端切图要选择png和jpg呢?
今天特意验证了一下: 切完图分别保存png24.png8和jpg60.jpg80(60和80表示保存图片时品质选择)后, 然后再压缩图片,压缩图片地址:https://tinypng.com/ 图片直 ...
- lamp-linux-1
LAMP编程之Linux(1) LAMP:Linux Apache MySQL PHP LNMP:Linux Nginx MySQL PHP WAMP:Windows Apache MySQL PHP ...
- Elasticsearch入门CRUD(新增、查询、修改、删除)
1. 项目中引用 Elasticsearch.NET Elasticsearch 其他版本可在: http://www.nuget.org/ 找到对应的项目以源码 ! 本文以 2.4 ...
- 浅谈HashMap原理,记录entrySet中的一些疑问
HashMap的底层的一些变量: transient Node<K,V>[] table; //存储数据的Node数组 transient Set<java.util.Map.Ent ...
- Python 的 GIL 是什么鬼,多线程性能究竟如何
作者:卢钧轶(cenalulu) 本文原文地址: http://cenalulu.github.io/python/gil-in-python/ 前言:博主在刚接触Python的时候时常听到GIL这个 ...
- centos7安装配置sql server 2017 linux教程
一.安装教程 https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-docker https://docs.mic ...
- Tomcat启动和请求处理解析
tomcat是我们经常使用的组件,但是内部是如何运行的呢,我们去一探究竟. 1.tomcat架构 tomcat的整体架构图如下: Tomcat中只有一个Server,一个Server可以有多个Serv ...
- 「PKUWC2018」Slay the Spire
题目链接 题意分析 这个题其实不是期望 就是一共有\(C_{2n}^m\)种情况 每一种情况选择\(k\)张牌 然后求最大攻击值的总和 我们考虑 当前抽出了选出了\(i\)张强化牌 \(m-i\)张攻 ...
- PHP中引入文件的四种方式详解
四种语句 PHP中有四个加载文件的语句:include.require.include_once.require_once. 基本语法 require:require函数一般放在PHP脚本的最前面,P ...