继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

bootstrap基本知识点

慕无忌4230737
关注TA
已关注
手记 7
粉丝 36
获赞 146

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"><!-- 网页最左边 next右边-->
<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"><!-- 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>

打开App,阅读手记
7人推荐
发表评论
随时随地看视频慕课网APP