bootstrap初级

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/your-style.css" rel="stylesheet">


<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

强调：.lead
斜体：<em>、<i>
强调类：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
如果是hover的话，应该这样用：a.text-primary:hover
文本对齐风格：
.text-left
.text-right
.text-center
.text-justify 两端对齐
列表：
CSS本身：有序列表（ol、li）、无序列表(ul、li)、自定义列表（dl、dt（标题）、dd）
去点列表：.list-unstyled
内联列表：通过添加类名.list-inline来实现内联列表，简单点儿说就是把垂直列表换成水平列表，而且
去掉项目符号（编号），保持水平显示，也可以说内敛列表就是为制作水平导航而生。
定义列表：和CSS的差不多<dl><dt>标题</dt> <dd></dd></dl>
水平定义列表：就是<dt></dt>包含的内容和<dd></dd>在水平上，只有当屏幕大于768时才有这个效果。
代码：在bootstrap主要提供了三种代码风格
使用<code></code>来显示单行内联代码
使用<pre></pre>来显示多行快代码
使用<kbd></kbd>来显示用户输入代码
不管使用哪种代码风格，在代码中碰到小于号(<)要使用硬编码"<"来替代，大于号(>)要使用">"来替代。
而且对于<pre>代码块风格，标签前面留多少空格，在显示效果中就会留多少个空格。
当使用<pre>元素时，有时候代码太多，不想让其占有太大的页面篇幅，在pre标签上，添加类名
.pre-scrollable，可以控制代码块区域最大高度为340px，一旦超出，Y轴上有滚动条
表格：<table>
<thead>表头
<tr>
<th></th>
</tr>
</thead>
<tbody>表体
<tr>
</td></td
</tr>
</tbody>
</table>
为不同的样式风格提供了不同的类名：
.table:基础表格
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格
表格行的类：
.active:表示当前活动的信息
.success:表示成功或者正确的行为
.info:表示中立的信息或行为
.warning:表示警告，需要特别注意
.danger:表示危险或者可能是错误的行为

表单：
水平表单：bootstrap框架默认的表单是垂直风格的，但很多时候我们需要的水平表单
风格（标签居左，表单控件居右）。
要实现水平表单效果，需要2个条件：1是在<form>元素使用类名"form-horizontal"
2是要配合bootstrap框架的网格系统。
内联表单：有时候我们需要把表单的控件都在一行内显示，只需要在<form>元素中添加类
名"form-inline"即可。
表单控件：输入框input
表单控件：下拉选择框select
表单控件：文本域textarea
表单控件：复选框checkbox，需要添加类名.checkbox
表单控件：单选择按钮radio，需要添加类名.radio
表单控件：复选框和但选按钮水平排列，需要添加在label上添加类名checkbox-inline或
radio-inline
表单控件：按钮，通常使用<button>来设置
类有几种类型btn、btn-primary、btn-info、btn-success、btn-warning、
btn-danger、btn-inverse、btn-default、btn-link
表单控件：设置控件的大小，类名：input-sm, input-lg,这个仅仅是对高度进行了处理，
如果要对宽度进行处理的话，那么就要用到BootStrap框架里的网格系统
表单控件：禁用状态，bootstrap框架的表单的禁用状态和普通的表单的表单禁用状态
是一样的，在相应的表单控件上添加属性"disabled"
如：<input class="form-control" type="text" placeholder="表单已经
禁用不能输入" disabled>
如：在bootstrap框架中，如果fieldset设置了disabled属性，整个域都
处于被禁用状态。
如：据说对于整个禁用的域，如果legend中有输入框的话，那么这个框
是无法被禁用的。<filedset disabled><legend><input type="text"
class="form-control" placeholder="啦啦啦" /></lengend></filedset>
表单控件：验证状态。成功状态：.has-success，错误状态：.has-error，警告状态：.has-warning
，是和form-group放一起的，如果要加图标的话，需要加has-feedback,这个是放在
成功状态类名的后面的。然后在后面加上span。如：
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
<span class="glyphicon glyphicon-remove form-control-feedback">
表单控件：表单提示信息。<span class="help-block"></span>
表单控件：多标签支持按钮
<button class="btn btn-default" type="button"></button>
<input type="submit" class="btn btn-default">
<span class="btn btn-default"></span>
<div class="btn btn-default"></div>
表单控件：按钮大小，.btn-lg, .btn-sm
表单控件：块状按钮，制作按钮时，需要在制作按钮的时候需要按钮宽度充满整个父容器。
可以使用类：.btn-block。
表单控件：方法一：在标签中添加disabled属性。方法二：在元素标签中添加类名"disabled"
图像：
.img-responsive 响应式图片，主要针对于响应式设计
.img-rounded 圆角图片
.img-circle: 圆形图片
.img-thumbnail 缩略图片
图标：
如：glyphicon glyphicon-search、 glyphicon glyphicon-asterisk

网格系统：网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有24或32份，但12最
常见），再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。bootstrap
框架中的网格系统就是将容器平分成12份的。

页偏移：有的时候我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段
来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素
上添加类名"col-md-offset-*"（其中星号代表要偏移的列组合数），那么具有这个类名的列就会
向右偏移。例如,你在列元素上添加"col-md-offset-4"，表示该列向右移动4个列的宽度。

列排序：其实就是改变列的方向。需要添加类名col-md-push-*和col-md-pull-*（*代表移动的列
组合数）

列的嵌套：在一个列里，又可以添加行，最多依然是可以分成12份，不过12份的最大宽度是父元素的宽度。

下拉菜单：
基本用法：1.使用一个名为"dropdown"的容器包裹了整个下拉菜单元素<div class="dropdown"></div>
2.使用了一个<button>按钮作为父菜单，并且定义类名为"dropdown-toggle"和自定义"data-
toggle"属性，且值必须和最外容器类名一致，此示例为: data-toggle="dropdown"
3.下拉菜单项使用ul列表，并且定义一个类名为"dropdown-menu"，此示例为：
<ul class="dropdown-menu">
实现原理：通过js，给父容器"div.dropdown"添加或移除类名"open"来控制下拉菜单显示或隐藏。
下拉分割线：<li role="presentation" class="divider"></li>
菜单标题：<li role="presentation" class="dropdown-header"></li>
对齐方式：bootstrap下拉菜单默认是左对齐，如果要让下拉菜单相对于父容器右对齐时，可以在"dropdown-
menu"上添加一个"pull-right"或者"dropdown-menu-right"类名
菜单项状态：当前状态(.active)和禁用状态(.disabled)

按钮：
按钮组：使用一个名为"btn-group"的容器，把多个按钮放在这个容器中。
按钮工具栏：将按钮组"btn-group"放在一个大的容器"btn-toolbar"中。
按钮组大小："btn-group-lg"、"btn-group-sm"、"btn-group-xs"
嵌套分组：很多时候，我们常把下拉菜单和普通的按钮排列在一起，实现类似于导航菜单的效果
直接为那个按钮设置为按钮组，将<ul></ul>写在里面就可以了。
垂直嵌套分组：需要将类名"btn-group"换成"btn-group-vertical"
等分按钮：等分按钮也常被称为是自适应分组按钮，只要再按钮组"btn-group"上追加一个
"btn-group-justified"。注意：在制作等分按钮时，请尽量使用<a>标签元素来
制作按钮，因为使用button标签元素的话，使用display:table在部分浏览器下支持并不好
按钮下拉菜单：从外观上看和下拉菜单差不多，按钮下拉菜单的原理是点击一下菜单，会显示隐藏的
下拉菜单。
按钮的向下向上三角形：实现方法：需要在".btn-group"类上追加"dropup"类名（这也是
做向上谈起下拉菜单要用的类名）。
向上弹起的下拉菜单：同上
导航：
基础样式：标签形tab导航，也称为选项卡导航
<ul class="nav nav-tabs">
<li><a href="#">ha</a></li>
</ul>
选项卡活动状态：<li class="active"><a href="#">ha</a><li>
选项卡禁用状态：<li class="disabled"><a href="#">hh</a></li>
胶囊形(pills)导航：<ul class="nav nav-pills">
<li class="active"><a></a></li>
</ul>
垂直堆叠的导航：只需要在"nav-pills"的基础上添加一个"nav-stacked"类名即可。
自适应导航：自适应导航指的是导航占容器全部宽度，而且菜单项可以像表格的单元格一样
自适应宽度，需要加一个类名"nav-justified",当然也需要和"nav-tabs"或者
"nav-pills"配合使用。
导航加下拉菜单（二级导航）：将li标签作为父容器，使用类名"dropdown"，同时在li中嵌套
另一个列表ul就可以了。
如：
<ul class="nav nav-pills">
<li class="active"><a href="##">这是首页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">haha</a></li>
</ul>
</li>
</ul>
面包屑式菜单：为ol加入breadcrumb类。

导航条（navbar）：
基础导航条：在制作一个基础导航条时，分以下几步：1.首先在制作导航的列表(<ul class=
nav">)基础上添加类名"navbar-nav"。2.在列表容器外部添加一个容器(div)，并且
使用类名"navbar"和"navbar-default"
为基础导航条添加标题，二级菜单及状态：
添加标题：为要添加的那个标题设置一个容器(div)，添加类名"navbar-header"，
在其下的<a>标签添加类名"navbar-brand"。添加二级菜单，还是以<li>标签为父
元素，设置其类名为dropdown，其子容器为<a>和<ul>，类名按照下拉菜单一样实现。
带表单的导航条：比如加搜索框和按钮。在navbar容器里放置一个带有navbar-form类名的表单
如：
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group>
<input type="text" class="form-control" placeholder="请输入
关键字" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
固定导航条：使用.navbar-fixed-top和.navbar-fixed-bottom
响应式导航条：此处看代码最好。 http://www.imooc.com/code/3124
反色导航条：只是将navbar-deafult改成了navbar-inverse。
带页码的分页导航：具体能看到多少页，使用<ul>、<li>，在<ul>标签上加入pagination方法，通过"pagination-lg"
让分页导航变大。通过"pagination-sm"让分页导航变小
翻页分页导航：这种分页导航是看不到具体的页码，只会提供一个"上一页"和"下一页"的按钮
为ul添加.paper，为li添加.previous使上一步居左，.next可以使下一步居右。

标签：
使用方法：<h3>Example heading <span class="label label-default">New</span></h3>
label、label-default、label-primary、label-success、label-info、lable-warning
label-danger

徽章：
使用类名badge，如<span class="badge pull-right">3</span>

缩略图：
通过"thumbnail"样式配合bootstrap的网格系统来实现，为缩略图添加描述使用样式caption

警示框：
默认警示框：使用的是alert来实现警示框效果alert,alert-success、alert-info、alert-warning
以及alert-danger
可关闭的警示框：。。
警示框的链接：添加alert-link

进度条：
基本进度条：外容器使用progress，内容器使用progress-bar
彩色进度条：内容器：progress-bar-info以及其他。。
条纹进度条：外容器：progress-striped，内容器:progress-bar-info及其他。
动态条纹进度条：在progress和progress-striped的基础上再加入active
层叠进度条：百分比，多个内容器
带Label的进度条：直接在<div>标签中添加入:10%

媒体对象：
媒体对象的容器：media
媒体对象的对象：media-object
媒体对象的主体：media-body
媒体对象的标题：media-heading
媒体对象可以嵌套，在medio-body里
媒体对象列表：<ul class="media-list"><li class="media"></li></ul>

列表组：
基本列表组：主要包括两个部分，一个是list-group，列表组容器，常用的是ul元素
当然也可以是ol或是div元素。第二个是list-group-item:列表项，常用
的是li元素，也可以是div元素
带徽章的列表组：只要子啊<li></li>中间添加<span class="badge">12</span>就可以了
带链接的列表组：加<a>标签
自定义列表组：list-group-item-heading用来定义列表项头部样式
list-group-item-text用来定义列表项主要内容
列表项的状态：active disabled
多彩列表项：list-group-item-success等等

面板：
基本面板：就是一个div容器运用了"panel"样式，产生一个具有边框的文本显示块。由于
panel不控制颜色，所以在panel的基础上添加一个控制颜色的主题panel-default
另外在里面添加了一个div.penel-body来放面板主体的内容。
带有头和尾的面板：panel-heading,panel-footer
彩色面板：修改panel-default为panel-danger等等
面板中可以嵌套表格 panel-body里嵌套
面板中可以嵌套列表组 panel-body里嵌套

Bootstrap支持的JavaScript插件
动画过渡(Transitions)等等

bootstrap初级的更多相关文章

Bootstrap初级用户谈谈网页在手机上的显示效果优化
本人之前已经使用Bootstrap有一段时间了,但是之前做出的网站都只是在电脑端使用,没有注意过手机端的显示效果.这两天自己使用Bootstrap做了一个简单的Web个人日志系统,想在手机端也使用,桌 ...
Bootstrap图片旋转轮播的实现
bootstrap初级知识旋转轮播源文件:carousel.js.carousel.less CSS文件:bootstrap.css 这些源文件可以从bootstrap中下载,关于轮播,有很多译法, ...
[web建站] 极客WEB大前端专家级开发工程师培训视频教程
极客WEB大前端专家级开发工程师培训视频教程教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...
web 前端开发学习路线
初级 HTML 5 HTML 5 与 HTML 4 的区别 HTML 5 新增的主体结构元素 HTML 5 新增的非主体结构元素 HTML 5 表单新增元素与属性 HTML 5 表单新增元素与属性(续 ...
angular+bootstrap+MVC 之三，分页控件初级版
今天实现一个分页控件,效果如下: 1.HTML: <!doctype html>  <html ng-app="appT ...
【angular+bootstrap】angular初级的时间选择器
近期的一个项目,是用angular来写的,本来框架就是第一次接触,使用相关插件的时候就感觉更加没有头绪了,其中一个插件就是时间选择器.比较好用时间选择器就是bootstrap里面的datetimepi ...
JS组件系列——Bootstrap文件上传组件：bootstrap fileinput
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 1
原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
bootstrapValidator.js，最好用的bootstrap表单验证插件
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

随机推荐

jQuery如何创建元素
1.$("<ul>").attr("id","taglist").appendTo("#tagCloud") ...
HTML模块化：使用HTML5 Boilerplate模板
HTML5 Boilerplate 是一个由 Paul Irish(Google Chrome 开发人员.jQuery 项目成员.Modernizr 作者.yayQuery 播客主持人)主导的“前端开 ...
iOS 登陆之界面设置
1.界面构成 1.1. 效果图 1.2. 元素背景图用户名的输入框密码的输入框登陆按钮忘记密码用户注册第三方登陆两个分割线
Xtrabackup构建MySQL主从环境
环境:HE3主库,HE1从库 HE1:192.168.1.248 HE3:192.168.1.250 从库my.cnf加入以下参数并重启数据库: read_only=1 log_slave_updat ...
java 字符串大小比较
//java 字符串大小比较 String a="b123"; String b="b124"; String d="b122"; Stri ...
Spring mvc 数据验证
加入jar包 bean-validator.jar 在实体类中加入验证Annotation和消息提示 package com.stone.model; import javax.validation. ...
lufylegend库鼠标事件循环事件键盘事件
lufylegend库鼠标事件循环事件键盘事件 <!DOCTYPE html> <html lang="en"> <head> <m ...
PHP使用hash_algos函数计算哈希值，之间的性能排序
PHP从5.1.2版本以上开始支持hash_algos函数,看这个名字就知道了,algos在英文中也表示算法的意思,hash_algos就是哈希算法,收集了一些常用的哈希算法,从5.1.2开始不同版本 ...
Win下JDK的安装和简单使用教程
下载安装一.从官网下载 1.百度jdk 然后点击像图片中指出的那个链接(www.oracle.com是java的官网) 2.下载(先点击那个选择框同意许可协议) 然后根据自己的电脑选择下载 64 ...
HDU 2080 夹角有多大II
夹角有多大II Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

bootstrap初级

bootstrap初级的更多相关文章

随机推荐

热门专题