bootstrap简单的过一遍

注:.xxxx 表示类(class=xxxx)

<h1>到<h6>均可使用。另外还提供了.h1到.h6的class

.lead可以让段落突出显示

<small>  其内的文本将被设置为父容器字体大小的85%

<strong> 着重

<em> 斜体

对齐class:text-left ,text-center,text-right

强调class: text-muted
        text-primary
        text-success
        text-info
        text-warning
        text-danger

<abbr>:基本缩略语,.initialism 可以将其font-size设置的更小些

<blockquote>:任何HTML裹在<blockquote>之中即可表现为引用
             .pull-right 右对齐 .pull-left 左

<cite>:

<ol>或<ul>: .list-unstyled 移除了默认的list-style样式和左侧外边距的一组元素

<dl><dt><dd>: .dl-horizontal可以让<dl>内短语及其描述排在一行

<code>:在正文中通过<code>标签包裹内联样式的代码片段,为了正确的展示代码,注意将尖括号做转义处理。

<pre>:多行代码可以使用<pre>标签。为了正确的展示代码,注意将尖括号做转义处理。

表格相关##############################################################################################

<table>:.table-striped 增加斑马条纹样式
         .table-bordered为表格和其中的每个单元格增加边框
         .table-hover可以让<tbody>中的每一行响应鼠标悬停状态
     .table-condensed可以让表格更加紧凑,单元格中的内部(padding)均会减半。

<thead>
<tbody>
<tr>
<td>
<th>
<caption>:表格用途的描述和摘要

为行或单元格设置颜色
.active  鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.warning 标识警告或需要用户注意
.danger  标识危险或潜在的带来负面影响的动作

将任何.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。

表单相关##############################################################################################

.form-control:所有设置了.form-control的<input>、<textarea>和<select>元素都将被默认设置为width: 100%;。
.form-group:将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。
.form-inline:元素紧凑
.sr-only:隐藏label
.form-horizontal
.checkbox-inline
.radio-inline
.form-control-static:将一行纯文本放置于label的同一行,为<p>元素添加.form-control-static即可

disabled: 被禁用的输入框

校验状态: .has-warning、.has-error或.has-success

通过.input-lg之类的class可以为控件设置高度,通过.col-lg-*之类的class可以为控件设置宽度。

.help-block 块级帮助文本

按钮相关##############################################################################################

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">链接</button>

尺寸 .btn-lg、.btn-sm、.btn-xs

.btn-block

活动状态 active

禁用状态 disabled

工具class##############################################################################################

bootstrap简单的过一遍

时间: 2024-12-28 19:42:04

bootstrap简单的过一遍的相关文章

mvc area区域和异步表单,bootstrap简单实例

码农最怕眼高手低 今天来练习mvc Area技术和bootstrap以及异步表单的C#代码实现. 1.area区域架构对于建立复杂业务逻辑很有帮助,由  AreaRegistration.RegisterAllAreas()方法遍历路由表,获得所有注册的路由.参见 建立类库Common,下设一个文件夹BookStore 在其中建立model和controller.(注意引用System.Web.Mvc这个dll) 项目结构如图: 其中book.cs为model模型 namespace Commo

Bootstrap简单入门

Bootstrap简单入门 BootStrap基本模板 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta charset="utf-8"> <!--声明文档兼容模式,表示使用IE浏览器的最新模式--> <meta http-equiv="X-UA-Compa

bootstrap 简单教程

bootstrap 的学习非常简单,并且它所提供的样式又非常精美.只要稍微简单的学习就可以制作出漂亮的页面. bootstrap中文网:http://v3.bootcss.com/ bootstrap提供了三种类型的下载: ------------------------------------------------------------- 用于生产环境的 Bootstrap 编译并压缩后的 CSS.JavaScript 和字体文件.不包含文档和源码文件. Bootstrap 源码 Less

使用bootstrap简单制作Tab切换页

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

bootstrap简单的签收页面

http://aqvatarius.com/themes/atlant/html/ui-icons.html <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SignOrder.aspx.cs" Inherits="MIRService.SignOrder" %> <!DOCTYPE html> <html> <hea

Bootstrap简单应用——对首页进行重构

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--声明文档兼容模式,表示使用IE浏览器的最新模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--设置视口的宽度(值为设备的理想宽度),页面

bootstrap简单的响应式布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap基础</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"

web前端【第十四篇】Bootstrap简单使用

一.一个小知识点 1.截取长屏的操作 2.设置默认格式 3.md,sm, xs 4.空格和没有空格的选择器 二.响应式介绍 - 响应式布局是什么? 同一个网页在不同的终端上呈现不同的布局等- 响应式怎么实现的? 1. CSS3 media query 媒体查询 2. JS去控制网页的布局和样式等 - 缺点:工作量大,网页响应慢 - 优点: 专治疑难杂症 3. 用框架 - Bootstrap 测试用css 媒体查询实现响应式 方式一.link.css文件 主文件中导入link.css文件 方式二.

Bootstrap简单介绍

一.一个小知识点 1.截取长屏的操作 2.设置默认格式 3.md,sm, xs 4.空格和没有空格的选择器 二.响应式介绍 - 响应式布局是什么? 同一个网页在不同的终端上呈现不同的布局等 - 响应式怎么实现的? 1. CSS3 media query 媒体查询 2. JS去控制网页的布局和样式等 - 缺点:工作量大,网页响应慢 - 优点: 专治疑难杂症 3. 用框架 - Bootstrap 测试用css 媒体查询实现响应式 方式一.link.css文件 主文件中导入link.css文件 方式二