-
Bootstrap中的排版：文本
段落：p标签——默认：14px;行高：20px；底部外边距：10px
Bootstrap中的排版：对齐
.text-left，给指定段落添加该类名，产生左对齐效果
.text-center
.text-right
Bootstrap中的排版-大小写
.text-lowercase，将指定内容添加该类名，转换其中大写字母为小写样式
.text-uppercase
.text-capitalize，首字母大写（每个独立单词的）
标签：<mark>加黄色背景色，<del>中间加删除线，<ins>标记插入，加下划线，<u>标签也是加下划线，<small>副标题标签，市字体比标签外的字体变小,<strong>标签加粗字体
查看全部 -
<mark>强调文字，底边变黄</mark>
<del>删除文字，中间有横线</del>
<ins>下划线</ins>
<u>下划线</u>
<small>文字变小</small>
查看全部 -
面板：
1、.panel代表面板
2、.panel-body代表面板内容
3、.panel-footer代表面板的注脚
<div class="panel panel-default">//-primary、-success、----
<div class="panel-heading">
面板头部
</div>
<div class="panel-body">
面板内容
</div>
<div class="panel-footer">
面板尾部
</div>
</div>
查看全部 -
bootstrap组件-怪异的属性
1、role（HTML5的标签属性，是给特定的浏览器工具如盲文使用的）
2、aria-label
3、tabIndex控制键盘中tab键控间中进行移动
4、data-
查看全部 -
网页开发中的单位：
-px 相对于显示屏幕分辨率的长度单位，但其大小无法跟随屏幕放大缩小，不过所有的浏览器都支持px单位
-em 相对于当前文本内的字体尺寸，1em = 16px（但不完全是），em会继承父级元素的字体大小，IE的部分浏览器并不支持em,em在谷歌是12px，在safi是10px，在火狐是18px，em是不稳定的
-rem 与 em类似，相对于HTML根节点的字体单位，rem会继承根元素的字体大小，html{font-size:62.5%}——10个像素（16的62.5%）
查看全部 -
Bootstrap中的排版：
Bootstrap对默认的排版方式进行了CSS样式定义，使得各种基本结构套用出来的HTML页面更加美观。
标题：（h1~h6都能使用，而.h1~.h6类名能为内联元素赋予标题的样式）
字体大小皆为：
h1:36px;
h2:30px;
h3:24px;
h4:18px;
h5:14px;
h6:12px;
副标题：（small）,h标签内用<samll>标签圈定副标题的内容即可
查看全部 -
Bootstrap全局样式的特点：
①代码整洁；
②风格统一；
③美观易用；
Bootstrap中的全局样式：
Bootstrap提供了大量的全局样式，基本的HTML元素均可以通过class设置样式并得到增强效果。
排版、表格、表单、图片
查看全部 -
bootstrap：
开发响应式页面
利用栅格系统适配不同的硬件
查看全部 -
bootstrap表单
查看全部 -
带边框表格：.table-bordered
条纹状表格：table-striped
悬停变色：table-hover
紧凑风格：table-condensed
查看全部 -
<div class="dropdown">
<button class="btn btn-default btn-danger dropdown-toggle" data-toggle="dropdown">菜单项<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class=""><a href="www.baidu.com">百度</a></li>
<li class=""><a href="www.baidu.com">百度</a></li>
<li class=""><a href="www.baidu.com">百度</a></li>
<li class=""><a href="www.baidu.com">百度</a></li>
</ul>
</div>
查看全部 -
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link href="201658254038徐梓洲(Boostrap)/css/bootstrap.min.css"rel="stylesheet"/> <link href="201658254038徐梓洲(Boostrap)/css/bootstrap-theme.css" rel="stylesheet"/> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .glyphicon-asterisk{ color: #02a6e3; font-size: 100px; } </style> </head> <body> <button class="btn btn-danger"> <span class="glyphicon glyphicon-asterisk"></span>这是一个按钮</button> </body> </html>
查看全部 -
阿里图标库
查看全部 -
栅格
查看全部 -
列表组组件
列表--------list-group list-group-item active 选中 disabled 禁用 badge 状态数（例如点赞的人数）
<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">13</span>
</li>
<li class="list-group-item list-group-item-warning">
这是一个进度条
<span class="badge">13</span>
</li>
</ul>
查看全部
举报