关于bootstrap学习总结

来源：互联网发布：淘宝极有家投诉电话编辑：程序博客网时间：2024/06/16 08:12

1.bootstrap作为一种强大的前端的框架，内嵌丰富的css组件，和js插件,实现了以移动为优先响应式布局，适应多种物理设备的终端。2.首先下载bootstrap下载包，引入bootstrap.min.css这是压缩文件或者bootstrap.css文件都可以.3.boostrap的整体架构1栅格系统:栅格系统必须被包含在container容器中，如果是大屏的就显示4行，小屏的一行显示2个

栅格系统分为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

用户名

表单这块比较重要，控件较多，就不讲了，自己查阅手册.

0 0