栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > Bootstrap教程

bootstrap基本知识点

bootstrap基本知识点

bootstrap
基于html5和css3版本相对较高,依赖于jQuery,专门的开发工具jetstrap
一、环境搭建
打来压缩包,bootstrap.css
1.按钮: 效果:蓝色按钮点击过后有区别

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

..

颜色:
4.表单
4.1、input框
.input-lg:输入框变得大一些
.input-sm:输入框变得小一些
.placeholder:框内灰色提示语
.form-control:(边框变圆滑)设置基本的样式,适用于select,textare等多个标签。
4.2、
.form-group:代表一个区域块,每个区域块之间默认间隔15px.
.form-inline:设置组件水平排列
4.2.1、颜色
.has-success:代表一个状态,输入框,字体变为绿色
.has-warning:黄色
.has-error:红色
//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、红色按钮的效果

5、图片-形状
.img-rounded:圆角
.img-circle:圆形
.img-thumbnail:带有边框的圆角图形
6.辅助类
文本颜色、背景颜色、状态设置、三角符号。
7、渐进
响应式前端开发
三、网页布局
1、meta标签中的Viewport(根据设备大小显示)

.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;
}
}

3、栅格布局
将屏幕分为十二等分
col-lg-3:超大屏占三份、col-md-4:小屏占四份、平板大小屏幕占6份、超小屏(手机)占全屏
col-lg-offset-3:超大屏向左偏移三份(屏宽的四分之一)
eg、

4、单位
px:相对于显示屏分辨率的长度单位,大小无法随屏幕的缩放,所有浏览器都支持。
em:相对于当前文本内的字体尺寸,会继承父元素的字体大小,部分浏览器并不支持,使用手机平板。1em=16px(但是不完全)。
rem:与em类似,相对于html根节点的字体单位,比em更稳定,除早期浏览器外大部分都支持。
5、图标,使用的是Giyphicons标签库(一般是收费的),允许bootstrap免费使用。
5.1、@font-face:引用本地或者在线图表或者字体(CSS中使用)
@font-face{
}
5.2、使用图标库的图标:去图标库复制名称
eg、想要改变图标样式通过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、星星形图标

3、下拉菜单
.dropdown:控制组件是否为下拉。
.dropdown-menu-right:右对齐(代替之前版本的.pull-right)。
divider:分割线
eg、
//按钮控制下拉,data-toggle="dropdown":切换的样式 data-toggle="dropdown":绑定事件(产生下拉效果)

//dropdown-menu:下拉的菜单



4、控件组
input-group:表示控件组
input-group-addon:放置额外的内容及图标
eg、
$

5、导航
5.1、以带有一个class名 nav的无序列表组成。
5.2、nav-tabs:代表可切换的导航。
5.3、nav-pills:代表胶囊导航。
5.4、nav-justified:使导航垂直。
eg、

6、分页
pagination:在父元素中添加表示分页
pager:放置在翻页区域
previous:把链接向左对齐
next:把链接向右对齐
eg:分页符

向左向右小按钮