博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
bootstrap入门基础
阅读量:6647 次
发布时间:2019-06-25

本文共 2022 字,大约阅读时间需要 6 分钟。

1.字体

text-lefttext-centertext-righttext-lowercase 小写text-uppercase 大写text-capitalize 首字母大写

2.表格

.table.table-bordered.table-striped.table-hover.table-condensed

3.颜色

denger 红色waring infosuccessactive

4.表格

form-controlform-group div里面组件form-inline 水平排版

5.输入

placeholder 提示input-lg 更大input-sm 更小sr-only 取消提示control-label has-success
.input-group 控件组.input-group-addon 防止额外内容图标

 

6.按钮

btnbtn-defaultbtn-successbtn-primarybtn-infobtn-warningbtn-dangerbtn-linkactive 按下状态(选中状态)btn-block 全屏状态(和父元素一样大)disableda标签也可以变成按钮

7.图片

img-rounded 圆角img-circle 圆形img-thumbnail 带边框的圆角

8.不同浏览器支持

meta name=viewport width height user-scalable initial-scale=1(代表1倍) maximum-scale minimun-scale
.test{}@media (only 只为屏幕发生改变) screen and(链接) (max-width:900px) and(min-width:500px){	.test{			}}

9.栅格

栅格分成12等份col-lg-3 col-md-4 col-sm-6 col-xs-12占超大屏列(宽度)的1/4 中等屏的1/3 小屏的1/2 手机端全屏显示(宽度)col-lg-offset-3超大屏幕的时候偏移1/4

10.单位

单位px 屏幕分辨率的长度单位em 字体尺寸(会继承父元素的字体大小 IE不支持)rem: 与em类似,相对于HTML根节点的字体单位,HTML默认字体大小16px1. rem会继承根元素字体大小2.1rem = 10px = html{font-size:62.5%}3.几乎所有浏览器都支持了

11.图标(字体图标)

复制图标库(http://getbootstrap.com/components/ 也可用国产的)中的图标class="glyphicon glyphicon-asterisk"可以添加样式.glyphicon-asterisk{color:green;font-size:100px}

12.下拉菜单

下拉菜单.dropdown 控制组件为下拉dropdown-toggle下拉菜单data-toggle指以什么事件触发,常用的如modal,popover,tooltips等,data-target指事件的目标,一起使用就是代表data-target所指的元素以data-toggle指定的形式显示data-dismiss 关闭某个元素.dropdown-menu-right 代替.pull-right右对齐divider 分割线下拉框的下标

13.导航栏

.nav .nav-tabs 可切换的导航.nav-pills 胶囊导航.nav-justifiled 导航垂直

14.分页

分页.pagination  父元素中添加分页pagination-lg 变大pagination-sm 变小.pager 翻页区域.previous 链接左对齐.next 链接右对齐

15.进度条

进度条.progress.progress-bar.progress-bar-success 颜色.progress-bar-striped 进度条颜色渐变(花纹)

16.列表

列表list-grouplist-group-item 列表项active disabledbadge 提示未读消息的下标list-group-item-info 颜色

17.面板

面板.panel .panel-default .panel-primary 蓝色。。。。.panel-heading 面板头部(面板是干什么的).panel-body 面板内容.panel-footer 面板注脚

18.插件

插件data 控制页面交互$(document).off('.data-api')解除属性绑定modal 模态框是覆盖在父窗体上的子窗体modal-dialogmodal-contentmodal-headermodal-bodymodal-footer

  

转载地址:http://eouto.baihongyu.com/

你可能感兴趣的文章
python计算春节倒计时
查看>>
IOS测试入门必看
查看>>
年末至,思乡浓,致敬北漂(邯郸人有彩蛋)
查看>>
数据库设计文档模板
查看>>
Unix整理笔记-超级无敌常用命令杂谈1-里程碑M6
查看>>
CloudStack4.1.1升级CloudPlatForm4.2.0实践手册
查看>>
Centos安装各种数据分析库,numpy,pandas,matplotlib,seaborn,scipy
查看>>
C#基础知识整理:C#类和结构(3)
查看>>
SharePoint Server 2010 初始化
查看>>
【我眼中的戴尔转型】(四)惠普之道,月亮的脸悄悄地在改变
查看>>
***S 2012 聚合函数 -- 指定分页示例
查看>>
直播疑难杂症排查(3)— 首开慢
查看>>
某公司机房成功搭建openssh server跳板服务器
查看>>
ADT在線互動教學
查看>>
PowerShell 添加 自定义的ScriptProperty 属性
查看>>
Shell一些例子
查看>>
MySQL 可优化的一些参数详解
查看>>
zabbix监控web页面,以及告警配置
查看>>
C#中传值调用和传引用调用的理解
查看>>
硬盘整数分区最精确地方法(转载)
查看>>