我的bootstrap日记

<!-- 常用格式 -->
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>

<!-- 列偏移 -->
<div class="col-md-offset-4 col-md-4"></div>
<div class="col-md-push-9 col-md-3"></div>
<div class="col-md-9 col-md-pull-3"></div>

<!-- 常用标记 -->
<small>副标题</small>
<mark>标记</mark>
<div class="lead">让段落突出</div>
<del></del>
<s></s>
<ins></ins>
<u></u>
<strong></strong>
<em></em>
<i></i>
<b></b>
<blockquote></blockquote>
<div class="pull-right"></div>
<div class="blockquote-reverse"></div>

<!-- 文本对齐 -->
<div class="text-left"></div>
<div class="text-center"></div>
<div class="text-right"></div>
<div class="text-justify"></div>

<div class="text-newrap"></div>
<div class="text-lowercase"></div>
<div class="text-uppercase"></div>
<div class="text-capitalize"></div> <!-- text-capitalize -->
<!-- 文本样式 -->
<div class="text-muted">灰色,半透明</div>
<div class="text-primary">蓝色的,primary</div>
<div class="text-info">淡黄色,info</div>
<div class="text-warning">警告文本</div>
<div class="text-danger">错误提示文本</div>
<div class="text-success">绿色,success</div>

<!-- 列表样式 -->
<div class="list-unstyled">无样式(去除前面的点了)</div>
<div class="list-inline">行内样式,列表水平排列</div>
<div class="dl-horizontal">单个列表水平放置</div>

<!-- 代码 -->
<code>普通代码</code>
<kbd>键盘符号</kbd>
<pre>预定义,一般用于代码片段</pre>

<!-- 表格 -->
<table class="table">普通表格类</table>
<table class="table table-striped">各行变色表格</table>
<table class="table table-hover">鼠标滑过变色</table>
<table class="table table-border">带有表框的表格</table>
<table class="table table-condensed">紧凑型表格</table> <!-- table-condensed -->
<table class="table table-responsive">自适应表格</table> <!-- table-responsive -->
<!-- <tr><td><th>类 -->
<tr class="active">激活风格行</tr>
<td class="success">success风格单元格</td>
<th class="info">info风格页头</th>

<!-- 表单 -->
<form action="" class="form">form表单基本类</form>
<div class="form-group">建议将输入框组嵌套到表单组中使用</div>
<label for="" class="sr-only">一般输入框前面会用一个label层包裹标题</label>
<input type="text" class="form-control"> <!-- form-control类能够让框100%显示 -->

<form action="" class="form-inline">内联表单</form> <!-- 所有表单元素一起在一行显示 -->
<form action="" class="form-horizontal">水平表单</form> <!-- 每个表单组占一行,里面有多个元素共一行显示 -->
<div class="input-group">input输入组</div>
<label for="" class="input-group-addon"></label> <!-- input组里面锁定文本的类 -->
<!-- 支持的控件 -->
<input type="text">
<!-- password data month time week number email url seach tel colol -->
<input type="checkbox"> <label for="" class="checkbox-inline"></label>
<input type="radio"> <label for="" class="radio-inline"></label>
<textarea></textarea>
<select class=‘form-control‘ multiple></select>
<option value=""></option>
<!-- 静态控件 -->
<p class="form-control-static">静态文本</p>
<!-- 禁用与只读 -->
disabled readonly
<!-- 校验状态 -->
.has-waring .has-success .has-error <!-- 一般添加到表单组里面 -->
<!-- 添加额外的图标 -->
.has-feedback 添加到表单组
.glyphicon .glyphicon-ok .form-control-feedback <!-- 添加在单独添加的一个空span标签上面 -->
<!-- .glyphicon-ok .glyphicon-waring-sign .glyphicon-remove -->
<!-- 控件大小 -->
.input-lg .input-sm .input-xs
.col-sm-10 ......
<!-- 帮助文本 -->
<span class="help-block"></span>

<!-- 按钮 --><!-- 按钮 --><!-- 按钮 --><!-- 按钮 -->
<!-- 样式 -->
<button class="btn btn-default">默认按钮样式</button>
<button class="btn btn-primary">primary按钮样式</button>
<button class="btn btn-success">success按钮样式</button>
<button class="btn btn-info">info按钮样式</button>
<button class="btn btn-warning">warning按钮样式</button>
<button class="btn btn-danger">danger按钮样式</button>
<button class="btn-btn-link">link按钮样式</button>
<!-- 尺寸 -->
.btn-lg .btn-sm .btn-xs
<button class="btn btn-default btn-block">100%宽度按钮</button> <!-- btn-block -->
<!-- 状态 -->
.active(支持button和a) .disabled(支持a, button需要用disabled = "disabled"属性)

时间: 2024-10-09 22:30:48

我的bootstrap日记的相关文章

Bootstrap学习:bootstrap简介(节选w3c菜鸟日记)

Bootstrap 简介 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 为什么使用 Bootstrap? 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式. 浏览器支

Bootstrap学习:bootstrap简介(节选w3c菜鸟日记)

Bootstrap 简介 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 为什么使用 Bootstrap? 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式. 浏览器支

Bootstrap学习:Bootstrap 网格系统

前面3节其实就是对w3c菜鸟日记的一个粘贴复制,下面开始真正的学习之路不过之. Bootstrap 网格系统 先做个介绍吧,看不懂的可以掠过,一样取自<w3c菜鸟日记> 什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的.水平的)组成的结构(通常是二维的).它广泛应用于打印设计中的设计布局和内容结构.在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的非常有效的方法. 简单地说,网页设计中的网格用于组织内容,

Appium Android Bootstrap控制源代码的分析AndroidElement

通过上一篇文章中<Appium Android Bootstrap源代码分析之简单介绍>我们对bootstrap的定义以及其在appium和uiautomator处于一个什么样的位置有了一个初步的了解,那么依照正常的写书的思路,下一个章节应该就要去看bootstrap是如何建立socket来获取数据然后如何进行处理的了. 但本人认为这样子做并不会太好,由于到时整篇文章会变得非常的冗长,由于你在编写的过程中碰到不认识的类又要跳入进去进行说明分析. 这里我认为应该尝试吸取著名的<重构>

Bootstrap + AngularJS+ Ashx + SQL Server/MySQL

去年年底12月,为适应移动端浏览需求,花了1个月时间学习Bootstrap,并将公司ASP网站重构成ASP.NET. 当时采取的网站架构: Bootstrap + jQuery + Ashx + SQL Server 时间紧,没人带,只能硬着头皮,最后如期完成,但是也遗留了几个问题. 问题: 1.页面查询条件太复杂,太多的checkbox,jQuery操作DOM虽然方便,但是组合成json提交给后端还是比较麻烦,有没有天然支持json的前端框架或者脚本语言? html控件做的任何修改,都自动保存

CSS,bootstrap表格控制当td内容过长时用省略号表示,以及在不使用bootstrap时过长也用省略号表示

首先需要在table中设置table-layout:fixed; <table style="table-layout:fixed"></table> 然后在表头th中设置每列的宽度 <table style="table-layout:fixed"> <th width="10%">Title01</th> <th width="20%">Title02

Bootstrap &amp; Font Awesome 学习笔记

学习网站:http://bootstrap.ninghao.net/index.html https://www.freecodecamp.cn http://www.runoob.com/bootstrap/bootstrap-tutorial.html Bootstrap 为快速简单的实施 Web 开发准备的前端架构. Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 -- 强调 响应式设计的概念. 通过响应式设计,你无需再为你的网站设计一个手机版的.它在任何尺寸的屏幕上看起

第二百三十八节,Bootstrap输入框和导航组件

Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一.输入框组件 文本输入框就是可以在<input>元素前后加上文字或按钮,可以实现对表单控件的扩展. 在左侧添加文字 input-group-addon样式class类,写在input同级的span里,给输入框添加一个左片段(Bootstrap)input-group样式class类,写在input外层div里,将

第二百三十一节,Bootstrap 介绍

Bootstrap 介绍 学习要点: 1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备 本节课我们主要了解一下 Boostrap 历史.特点.用途,以及为什么选择 Boostrap 来开 发我们的 Web 项目. 一.Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于 HTML.CSS.JavaScript 的开源框架.该框架代码简洁.视觉优美,可