关于bootstrap学习总结
来源:互联网 发布:淘宝极有家投诉电话 编辑:程序博客网 时间:2024/06/16 03:41
栅格系统分为12列布局,超过12列会自动跳转到下一行,
对于大屏,1200px以上的col-lg-
对于中屏:992px~1200px col-md-
对于小屏:768px~992px;
对于超小屏:<768px;
他是响应式的
3.css的基本架构
1。基础样式
btn alert btn-info btn-success btn-warning btn-danger btn-lg btn-sm btn-ns
状态样式:active disabled
特殊元素样式:dropdown-menu>li>a:hover
并列元素样式:btn-group .btn+btn
嵌套元素样式btn-group.btn
动画样式 progress active
下面从标题讲起
h1~h6标签,Bootstrap自己定义了一个副标题标签
主要设置行高是h1~h6显示的65%,颜色为深灰色,并列显示.
2表格
表格一个基础类 table 加上下面几个类修饰作用的table-hover table-striped table-bordered 具体自己查手册
列表
ul ol dl三种列表形式
bootstrap默认对ul ol样式进行很小的更改,给li设置了border-bottom:20px,将其padding设置为0
list-unstyled
list-inline
第一个取消项目编号,第二是让其水平排列
dl主要是个其中dl加上一个font-weight:bold效果,想要水平排列的话,就加上dl-horizontal样式
- 标题
- 我是副标题
4 代码 <body>
解析其中一部分的代码
单行内联代码要用code包含
bootstrap对于code的设定
code{
padding:2px 4px;
font-size:90%;
color:#c7254e;
white-space:nowrap;
background-color:#f9f2f4;
border-radius:4px;
}
表示用户输入的代码,
多行代码块,具体见手册
4文本
dasdadasdasdadsdsdada湿哒
主要bootstrap提供了一些标签用来强调的
dasda
dasdad
3.6按钮
按钮
1.按钮的样式
按钮的基础类和table一样必须要加上btn btn-primary
btn-success btn-warning btn-danger btn-link
2 按钮的大小
btn-lg btn-sm btn-xs
3。多标签支持
按钮
按钮
4.活动的状态,主要给其加上active 或者disabled俩个类,改变状态
按钮
表示禁用了
按钮默认就添加了active的样式。
5图像
提供缩略图
主要给图片设置100%的宽度height:auto ;这样的话随浏览器窗口缩小而缩小了.
img-rounded
img-circle:
6。辅助样式
文本
text-muted text-primary text-danger text-warning text-success text-info
文本背景样式
bg-success bg-danger bg-primary bg-warning bg-info
关闭图标
×
×
其中close主要设置图标的位置在右上方
7下拉箭头
8内容浮动
pull-right :float:right;
pull-left:float:left;
9隐藏与现实
隐藏:bootstrap提供了样式hidden invisible
显示:show;
10.表单
用户登录内联:给form加上form-inline横向表单form-horizontal表单这块比较重要,控件较多,就不讲了,自己查阅手册.
- 关于bootstrap学习总结
- bootstrap学习总结
- bootstrap学习总结
- Bootstrap学习总结
- bootstrap学习总结分享
- 学习bootstrap的总结
- bootstrap学习总结
- Bootstrap学习总结(一)
- bootstrap学习总结-js组件
- 学习bootstrap 总结(1)
- BootStrap学习笔记,优缺点总结
- 关于使用bootstrap的一些小总结
- 关于bootstrap table 插件的使用总结
- 关于bootstrap的一些常用方法总结
- 关于bootstrap datetimepicker 的学习笔记
- Bootstrap学习笔记—关于表单
- Bootstrap学习笔记—关于网格系统
- 学习关于Bootstrap的感悟和体会
- 计算机科学与技术——英语技能不可少
- Android网络编程TCP、UDP(二)
- 生成Json、解析Json的简单示例
- 如何使用新版万能地图下载器下谷歌地图像和等高线叠加
- Manifest merger failed解决方法
- 关于bootstrap学习总结
- 数据结构和算法
- CSS hack(各个浏览器兼容问题)
- 深入浅出讲解:php的socket通信
- eclipse中集成struts环境的润乾项目
- gradle混淆错误查询
- 类加载器的父亲委托机制深度详解
- Android网络编程TCP、UDP(三)——UDP实例:搜索局域网所有的设备
- angular2.0demo小样