bootstrap3 .2.0
中所有的JS插件依赖于JQuery,因此要在Bootstrap前引用
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 在IE运行最新的渲染模式
<meta name="viewport" content="width=device-eidth,initial-scale-1">初始化移动浏览显示
对全局样式---移除body的margin声明
文本
《small》制作副标题
<font-family>字体 <b>和<strong>加粗 <em>和<i>斜体
.lead 突出字体 。.text-mutedL提示,浅灰色 .text-primary:主要,蓝色 .text-success:成功,使用浅绿色
.text-info:通知信息,浅蓝色 .text-warning警告 ,黄色 .text-danger危险,褐色 .text-left文本左对齐
.text-right文本右对齐 .text-center文本居中对齐 .text-justify文本两端对齐
.list-unstyled 给ul li(ol) 去除默认样式,给左边距清0 .list-inline 把垂直列表变水平列表,去掉项目符号
.dl-horizontal给(dl)实现水平显示效果
,,,
<code></code>单行内联代码
<pre></pre>多行代码块 .pre-scrollable可以控制代码块区域最大340px,超出有滚动条
<kbd></kbd>显示用户输入代码
表格
.table基础表格(1:设置margin-bottom:20px和单元内距 2:底部2px浅灰实线 3:顶部1px浅灰实线)
.table-striped斑马线表格 (隔一行有一个浅灰色背景色) 。
.table-boedered边框表格(单元格1px边框) 。
.table-hover鼠标悬停高亮表格 (鼠标经过整行亮浅灰色)。
.table-condensed紧凑型表格(单元格内距变5px) 。
.table-responsive响应表格(小于768px有滚动条)
<tr> .active 表示当前活动信息 #f5f5f5 (后四个和.table_hover配合使用) .success 成功 #dffd8 .info 中立 #d9edf7 .warning 警告 #fcf8e3 .danger 危险 #f2dede
表单
基础表单.form-control 1-宽度变100% 2-设置浅灰色边框 3-4px圆角 4-阴影效果 5-placeholder颜色#999
水平表单.form-horizintal 1-设置margin和padding2-form-group表现形式
内联表单.form-inline
INPUT.form-control
下拉选择框select multiole属性
文本域textarea.form_control 设置宽度为100%或auto
复选框checkbox和单选择按钮radio 1: 用label包起来 .checkbox---------.radio 2:水平排列 checkbox-inline----------radio-inline
按钮 submit button reset <button>
控件大小 input-sm让控件比正常大小更小 input-lg控件比正常大小更大
焦点状态 伪类.focus 删除outline默认样式
禁用状态 disabled
验证状态 has-warning:警告状态 黄色
has-error:错误状态 红色
has-success:成功状态 绿色
提示信息 .help-block提示信息以块状显示
按钮
基本按钮.bnt
默认按钮.bnt-default
grid system 栅格系统
JS插件
导航条navbar
导航条依赖JS,响应式导航条依赖折叠(collapse)插件
添加 .navbar-fixed-top类可以让导航条固定在顶部,固定的导航条会遮住页面的
其他内容,除非给<body>元素设置了padding。:70px
可以包含一个.container或.container-fluid容器,从而让导航栏剧中或自适应显示
通过添加.navbar-inverse类可以改变导航条的外观,变成黑底显示
、滚动图片广告 Carousel
Carousel是一个用于轮播内容的额额组件,也就是我们经常用到的滚动广告
1左右按钮 轮播换图
标签页
<ul class="nav nav-tabs" role="tablist" id="feature-tab">
<li class="active"><a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li>
<li><a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a></li>
<li><a href="#tab-safari" role="tab" data-toggle="tab">Safari</a></li>
<li><a href="#tab-opera" role="tab" data-toggle="tab">Opera</a></li>
<li><a href="#tab-ie" role="tab" data-toggle="tab">IE</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-chrome">
<div class="row feature">
<div class="col-md-7">
<h2 class="feature-heading"><span class="text-muted"></span></h2>
<p class="lead"></p>
</div>
<div class="col-md-5">
<img class="feature-image img-responsive" src="images/chrome-logo.jpg"
alt="Chrome">
</div>
</div>
</div>
</div>弹出框(模态框)Modal