BootStrap基本样式

文本对齐风格:
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐
取消列表符号:
.list-unstyled
内联列表:
.list-inline
定义列表:
<dl>
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客</dd>
<dt>慕课网</dt>
<dd>一个真心在做教育的网站</dd>
</dl>
水平定义列表:
.dl-horizontal
代码(一)
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码
1、<code>:一般是针对于单个单词或单个句子的代码
2、<pre>:一般是针对于多行代码(也就是成块的代码)
3、<kbd>:一般是表示用户要通过键盘输入的内容
.pre-scrollable 控制代码块高度 一般为340px 一旦超出这个高度,变出现Y轴滚
动条
表格:
.table:基础表格
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格
表格行的类:
.active 表示当前活动的信息
.success表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告,需要特别注意
.danger 表示危险或者可能是错误的行为
表单:
.form-control 很好看的文本框效果 为了让控件在各种表单风格中样式不出错
.form-inline 内联表单 相当于在一行排列了,最后因为form-control占满整个页
面空间
input-sm:让控件比正常大小更小
input-lg:让控件比正常大小更大
.checkbox 复选框
.radio 单选按钮
按钮:
btn 普通按钮
Primary 初级按钮
Info 消息按钮
Danger 危险按钮
Warning 警告按钮
Inverse 相反的按钮
如果将文本框放在
<fieldset disabled="disabled">
<legend>
<input type="text" class="form-control" placeholder="显
然我颜色变灰了,但是我没被禁用,不信?单击试一下" style="width:400px" />
</legend>
虽然颜色变灰,但是没有被禁用
</fieldset>
表单状态:
1.has-warning:警告状态(黄色)
2、.has-error:错误状态(红色)
3、.has-success:成功状态(绿色)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>BootStrap</title> <%-- 下面这些文件都需要引用才可以--%>
<script src="Script/jquery-1.11.2.min.js"></script>
<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />
<link href="bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="bootstrap-3.3.5-dist/css/bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server" class="form-inline">
<div class="navbar navbar-default" >
<div class="navbar-header">
<!-- .navbar-toggle样式用于toggle收缩的内容,即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 确保无论是宽屏还是窄屏,navbar-brand都显示 -->
<a href="##" class="navbar-brand">慕课网</a>
</div>
<!-- 屏幕宽度小于768px时,div.navbar-responsive-collapse容器里的内容都会隐藏,显示icon-bar图标,当点击icon-bar图标时,再展开。屏幕大于768px时,默认显示。 -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
</div> <div class="jumbotron">
BootStrap,一个封装好的CSS库,里面有各种各样的样式
<input id="Button1" type="button" value="Learn More" class="btn btn-primary btn-lg" />
</div> <span class="label label-default" >请输入你的邮箱:</span>
<input id="Text1" type="text" class="form-control " />
<br/>
<span class="label label-default" >请输入你的密码:</span>
<input id="Text2" type="text" class="form-control input-sm" placeholder="已被禁用" disabled="disabled" /> <br/> <br/>
<br/>
<span class="label label-default" >fieldset:自定义控件组</span>
<fieldset disabled="disabled">
<legend>
<input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" style="width:400px" />
</legend>
</fieldset> <select class="form-control">
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select> <input id="Button2" type="button" value="按钮样式" class="btn" /> <div class="has-error">
<input id="Text3" type="text" class="form-control " placeholder="错误状态" />
</div>
<br/>
<div class="has-success">
<input id="Text4" type="text" class="form-control " placeholder="成功状态" />
</div>
<br/>
<div class="has-warning">
<input id="Text5" type="text" class="form-control " placeholder="警告状态" />
</div>
<ul class="pager"> <li>下一页</li></ul> </form>
</body>
</html>
BootStrap基本样式的更多相关文章
- bootstrap 分页样式代码
bootstrap 分页样式代码,废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <title>Bootstrap ...
- Bootstrap表格样式(附源码文件)--Bootstrap
1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...
- [置顶]
bootstrap自定义样式-bootstrap侧边导航栏的实现
前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...
- Bootstrap -- 按钮样式与使用
Bootstrap -- 按钮样式与使用 1. 可用于<a>, <button>, 或 <input> 元素的按钮样式 按钮样式使用: <!DOCTYPE h ...
- Bootstrap -- 表格样式、表单布局
Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...
- 第二百三十二节,Bootstrap排版样式
Bootstrap排版样式 学习要点: 1.页面排版 本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题.页面 主体.对齐.列表等常规内容. 一.页面排版 Boot ...
- 覆盖bootstrap的样式
覆盖bootstrap的样式,很简单.在css中加上 !important 来更改自己样式的执行优先级!
- yii使用bootstrap分页样式
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...
- 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...
随机推荐
- LintCode-Fast Power
Calculate the an % b where a, b and n are all 32bit integers. Example For 231 % 3 = 2 For 1001000 % ...
- iOS-音频格式转换-b
iOS处理音频过程中有时候需要不同格式的音频进行转换,最近需要将m4a格式的音频转换成wav,在网上搜索之后代码整理如下: - (void)convetM4aToWav:(NSURL *)origin ...
- Flash设置全屏后,放到网页中显示不正常
stage.displayState = StageDisplayState.FULL_SCREEN;//全屏,注意当设置全屏后,放到网页中显示不正常
- 处理一则MySQL Slave环境出现ERROR 1201 (HY000): Could not initialize master info structure的案例
mysql> start slave; ERROR (HY000): Slave failed to initialize relay log info structure from the r ...
- JavaScript跨域总结与解决办法(转)
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首先什么是跨域 ...
- 【BestCoder】【Round#29】
T1 啊……a^b 与 c^d比较大小,我们可以两边取对数,转化成 log(a^b)=b*log(a) 和d*log(c) 这样就能直接算了……然后稍微搞一下精度什么的就A了=.= //BC #29 ...
- 01-05-01-2【Nhibernate (版本3.3.1.4000) 出入江湖】立即加载实现--NHibernateUtil.Initialize()和添加fetch关键字的HQL查询
相关资料: http://www.cnblogs.com/lyj/archive/2008/10/29/1322373.html 问题的提出: 1.延迟加载,可能会引起session已经关闭的异常,例 ...
- REST_FRAMEWORK加深记忆-极致抽象,极致完结
余下的就是静心看官方文档了. 这个是最抽象的了. urls.py """tutorial URL Configuration The `urlpatterns` list ...
- DP:LCS(最长公共子串、最长公共子序列)
1. 两者区别 约定:在本文中用 LCStr 表示最长公共子串(Longest Common Substring),LCSeq 表示最长公共子序列(Longest Common Subsequence ...
- SpringMVC学习总结(六)——SpringMVC文件上传例子(2)
基本的SpringMVC的搭建在我的上一篇文章里已经写过了,这篇文章主要说明一下使用SpringMVC进行表单上的文件上传以及多个文件同时上传的不同方法 一.配置文件: SpringMVC 用的是 的 ...