首页手记 bootstrap基本知识点

bootstrap基本知识点

标签：

Html/CSS Bootstrap

bootstrap
基于html5和css3版本相对较高，依赖于jQuery，专门的开发工具jetstrap
一、环境搭建
打来压缩包，bootstrap.css
1.按钮：<button class="btn btn-info">sss</button> 效果：蓝色按钮点击过后有区别

二、全局样式：
1.标题：h1-h6 h1:36px,30px,24px...
1.1、大标题
<h1>标题一</h1>
用内联标签显示出h1的效果，用class命名就可以实现
<span class="h1">标题一</span>
1.2小标题（small标签）
小标题在大标题后字体变浅，并小于大标题
<span class="h1">标题一<small>小标题</small></span>
2.段落文本的排版
p标签默认14px行高20px底部边距10px
.text-left、.text-center、.text-right：文本的左中右对齐。（设置标签的class属性实现）
.text-lowercase、.text-uppercase、.text-capitalize:文本的大小写，设置英文首字母大写。（设置标签的class属性实现）
3.特殊标记标签
<mark>,使用此标签标记的文本底色为黄色。
<del>,删除标签，被选中的文本会有中横线。
<ins>,设置文本的样式。文本会有下划线<u>标签会有同样的效果。
<small>，被选中的字体会变小。
<strong>,文本加粗。
3.排版-表格
.table-bordered:边框表格
.table-striped:条纹状表格
.table-hover:悬停变色，鼠标停留所在行，有高亮效果
.table-condensed:紧凑风格
可以同时设置几个属性
eg.<table class="table table-striped table-bordered tablehover"><thead><tr>..

颜色：
4.表单
4.1、input框
.input-lg:输入框变得大一些
.input-sm:输入框变得小一些
.placeholder：框内灰色提示语
.form-control:（边框变圆滑）设置基本的样式，适用于select，textare等多个标签。
4.2、<div>
.form-group:代表一个区域块，每个区域块之间默认间隔15px.
.form-inline:设置组件水平排列
4.2.1、颜色
.has-success:代表一个状态，输入框，字体变为绿色
.has-warning:黄色
.has-error:红色
<form class="form-inline">//form表单下的组件进行水平排列。
4.3、label
class="sr-only"//lable标签不显示
control-label:可控制的label，可以被改变的
4.4、按钮
.btn:底色灰色边框变柔和
.btn-default:默认效果简洁大方，白色
.btn-success：成功，绿色
.btn-primary：重要的，深蓝
.btn-info：信息，浅蓝
.btn-warning:报错，黄的
.btn-danger:有问题，红的
.btn-link:将按钮改成链接形式
.btn-lg、btn-sm:改变按钮大小
.active：默认按下的效果
.btn-block:按钮全屏
.disabled="disables":默认不可操作
4.4.1、<a class="btn btn-danger">红色按钮的效果

5、图片-形状
.img-rounded:圆角
.img-circle:圆形
.img-thumbnail：带有边框的圆角图形
6.辅助类
文本颜色、背景颜色、状态设置、三角符号。
7、渐进
响应式前端开发
三、网页布局
1、meta标签中的Viewport（根据设备大小显示）
<meta name="viewport" content="width=device-width,,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
.initial-scale=1:屏幕有多大就显示多大，初始比例
.user-scalable=no:网页不可以伸缩（yes可以）
.maximum-scale=1：最大放大多少倍
2、@media screen 检测屏幕大小
根据显示屏的大小更改样式
eg、CSS、@media screen and(max-width:900px) and (min-width:500px){
.test{
width:100%;
height:100px;
background:blue;
}
}
<div class="test">

3、栅格布局
将屏幕分为十二等分
col-lg-3:超大屏占三份、col-md-4：小屏占四份、平板大小屏幕占6份、超小屏（手机）占全屏
col-lg-offset-3:超大屏向左偏移三份（屏宽的四分之一）
eg、<div class="shange col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3" ></div>

4、单位
px:相对于显示屏分辨率的长度单位，大小无法随屏幕的缩放，所有浏览器都支持。
em:相对于当前文本内的字体尺寸，会继承父元素的字体大小，部分浏览器并不支持，使用手机平板。1em=16px(但是不完全)。
rem：与em类似，相对于html根节点的字体单位，比em更稳定，除早期浏览器外大部分都支持。
5、图标，使用的是Giyphicons标签库（一般是收费的），允许bootstrap免费使用。
5.1、@font-face:引用本地或者在线图表或者字体（CSS中使用）
@font-face{
}
5.2、使用图标库的图标：去图标库复制名称
eg、<span class="复制来的名称">想要改变图标样式通过class名在css里面设置。
四、bootstrap组件
1、特殊属性
1.1、role:标识一个普通标签，
1.2、aria-label：当焦点落到输入框时，读软件读出输入内容（配合读软件使用）。
1.3、tablndex:设置键盘中的tab键在控件中移动的特殊位置
1.4、data-:后面添加自定义名称，设置自定义属性，实现数据传递等作用
2、bootstrap组件-图标
2.1、glyphicon：用法class=glyphicon 图标具体名
eg、<span class="glyphicon glyphicon-star">星星形图标

3、下拉菜单
.dropdown:控制组件是否为下拉。
.dropdown-menu-right:右对齐（代替之前版本的.pull-right）。
divider:分割线
eg、<div class="dropdown">
//按钮控制下拉，data-toggle="dropdown"：切换的样式 data-toggle="dropdown"：绑定事件（产生下拉效果）
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
点击下拉
<span class="caret"></span>
</button>
//dropdown-menu：下拉的菜单
<ul class="dropdown-menu">
<li><a href="度娘" target="_blank" rel="nofollow">http://baidu.com">度娘</a></li>
<li><a href="慕课网" target="_blank" rel="nofollow">http://www.imooc.com">慕课网</a></li>
</ul>
</div>
4、控件组
input-group:表示控件组
input-group-addon：放置额外的内容及图标
eg、<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text"class="form-control"></div>
5、导航
5.1、以带有一个class名 nav的无序列表组成。
5.2、nav-tabs:代表可切换的导航。
5.3、nav-pills:代表胶囊导航。
5.4、nav-justified：使导航垂直。
eg、
<ul class="nav nav-tabs">
<li class="active"><a href="http:www.lnpc.com">spring</a></li>//默认选中
<li><a href="http:www.lnpc.com">struts2</a></li>
<li><a href="http:www.lnpc.com">hibernate</a></li>
</ul>
6、分页
pagination:在父元素中添加表示分页
pager：放置在翻页区域
previous：把链接向左对齐
next:把链接向右对齐
eg:分页符
<nav>
<ul class="pagination pagination-lg">
<li class="active">
<a href="1" target="_blank" rel="nofollow">http://www.imooc.com">1</a>
</li>
<li><a href="">2</a></li>
</nav>
向左向右小按钮
<ul class="pager">
<li class="previous">
<a href href="向左" target="_blank" rel="nofollow">http://www.imooc.com">向左</a>
7、进度条
progress表示进度条
通过改变状态类改变进度条颜色
.progress-bar-striped:使进度条颜色渐变
progress-bar:进度
eg.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 60%" >60%</div>
</div>
8、列表
list-group :l列表组
badge:代表状态数
active：代表选中状态
eg.
<ul class="list-group">
<li class="list-group-item active">
这是一个列表<span class="badge ">14</span></li>
<li class="list-group-item disabled">
这是一个列表<span class="badge">14</span></li>
<li class="list-group-item list-group-item-info">
这是一个列表<span class="badge">14</span></li></ul>
9、面板
panel:面板
panel-body:代表面板的内容
panel-footer:代表面板的注脚
五、bootstrap中的插件
1、引用 bootstrap.js jquery.js
2、data属性控制页面交互
3、$(document).off('.data-api')解除属性绑定
eg:点击按钮显示隐藏
eg:<button class="btn btn-danger btn-lg" data-toggle="modal" data-target="#danger">这里是测试按钮</button>
<div id="danger"> 这里是一个内容</div>