-
图片形状控制：
圆角：加类img-rounded
圆形：加类img-circle
带有边框的圆角图形：加类img-thumbnail
bootstrap中的辅助类：
文本颜色：
背景颜色
状态设置
三角符号
查看全部 -
特殊属性
1.role
html5标签属性 标识普通标签 使之语义化 方便浏览器对其功能识别的效果
2.aria-lable
通常使用在输入框里 当焦点落在输入框内时 读屏软件就会读出输入框内容
3.tabIndex
查看全部 -
分页效果：
1. .pagination在父元素中添加表示分页 2. .pager放置在翻页区域 3. .previous把链接向左对齐， .next把链接向右对齐。 </head> <body> <nav> <ul class="pager"> <li class="previous"><a href="http://www.imooc.com/">向左</a></li> <li class="next"><a href="http://www.imooc.com/">向右</a></li> </ul> <ul class="pagination pagination-lg"> <li class="active"><a href="http://www.imooc.com/">1</a></li> <li><a href="http://www.imooc.com/">2</a></li> <li><a href="http://www.imooc.com/">3</a></li> <li><a href="http://www.imooc.com/">4</a></li> <li><a href="http://www.imooc.com/">5</a></li> </ul> </nav> <!-- pagination-lg 变大 pagination-sm 变小 --> </body>
查看全部 -
bootstrap中的响应式开发原理是栅格布局，将屏幕分为12等份。元素可以给根据不同屏幕的大小适应相应的大小，如col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3 col-md-offset-4
col-lg-3：表示在大屏幕元素宽度大小为屏幕的3/12,即1/4,
col-md-4：表示在中等屏幕元素宽度大小为屏幕的1/3,
col-sm-6：表示在小屏幕元素宽度大小为屏幕的1/2,
col-xs-12：表示在极小屏幕元素宽度大小占满整个屏幕大小。
col-lg-offset-3：表示在大屏幕中元素的位置是距离屏幕左边为屏幕大小的1/4,
col-md-offset-4：表示在中等屏幕中元素的位置是距离屏幕左边为屏幕大小的1/3
查看全部 -
<table class="table table-striped table-bordered table-hover"> ... <tr class="danger"> // red warning // yellow info // blue success // green active // ? (옅은)查看全部
-
星型图标按钮 glyphicon glyphicon-star <div class="btn-group"> <button class="btn btn-control btn-default"> <label class="glyphicon glyphicon-circle-arrow-down">download</label> </button> </div>查看全部
-
Bootstrap——表单(1)： html5特性: placeholder 给用户输入一个提示 form->form-inline 它的所有元素是内联的，向左对齐的，标签是并排的,水平排版 div->form-group 将label和input(或其他)组合成一个组件 input->input-lg/sm 改变输入框大小 input->form-control 圆角方框发光 label->sr-only 取消提示信息 label-> control-label 可更改相关样式 div->has-successs/waring has-error等可改变颜色 (label等元素中要有control-label)查看全部
-
form->form-inline 它的所有元素是内联的，向左对齐的，标签是并排的,水平排版 div->form-group 将label和input(或其他)组合成一个组件 input->input-lg/sm 改变输入框大小 html5特性: placeholder 给用户输入一个提示 input->form-control 圆角方框发光 label->sr-only 取消提示信息 label-> control-label 可更改相关样式 div->has-successs/waring has-error等可改变颜色 (label等元素中要有control-label)查看全部
-
一些公司使用Bootstrap的样式而不使用Bootstrap的效果，由于Bootstrap的效果插件庞大，所以使用自己的插件更为便利查看全部
-
<meta name="viewport" content="width=device-width,initial-scale=0.5（设置网页初始化时的大小）,maximum-scale=1,minimum-sacle=1,user-scalable=no(是否允许用户放大缩小操作，“yes”时max和min 生效)">
查看全部 -
【Bootstrap中的排版】
【文本】
段落：p标签——默认：14px;行高：20px；底部外边距：10px
【对齐】
class = "text-left":左对齐
class = "text-center":居中对齐
class = "text-right":右对齐
【大小写】
class = "text-lowercase":字母小写
class = "text-uppercase":字母大写
class = “text-captialize”:首字母大写
【标签】
<mark>强调文字，底边变黄，高亮标记</mark>
<del>删除文字，中间有横线</del>
<ins>标记插入，下划线</ins>
<u>下划线</u>
<small>副标题，文字变小，字体比标签外的字体变小</small>
<strong>标签加粗字体</strong>
查看全部 -
分页：常用于图片、文字等的分页情况。
属性
属性详情
pagination
父元素中添加表示分页
pager
放置在翻页区域，与pagination相对
previous
把链接向左对齐
next
把链接向右对齐
page-header
分页底部线 *同样也可以使用-lg/sm显示按钮的大小。
案例截图：
案例代码：
<!--正常分页样式-->
<ul class="pagination">
<li class="active"><a href="">首页</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">尾页</a></li>
</ul>
<!--正常分页样式 end-->
<!--翻页样式-->
<div class="page-header" >
<ul class="pager">
<li class="previous"><a href="">上一页</a></li>
<li class="next"><a href="">下一页</a></li>
</ul>
</div>
<!--翻页样式 end-->
查看全部 -
bootstrap中的排版-对齐（对齐和大小写皆用类名进行标记）
文本的对齐
.text-left
.text-center
.text-right
大小写
.text-lowercase(大写变小写)
.text-uppercase(小写变大写)
.text-capitalize（首字母大写，后面的小写）
双标签
mark标签包括的文字加粗还有黄色的底边
del标签包括的文字中间有条横线
ins标签包含的文字加了下划线，让读者知道这是引用文本
下划线还可以用<u></u>
small标签可以使标签内的文字变的小一些
strong标签可以使标签内的文字加粗
查看全部 -
Bootstrap中的排版
标题：
h1:36px；
h2:30px；
h3:24px;
h4:18px；
h5:14px;
h6:12px；
副标题：small
可以用h1标签直接输出，也可用含有h1的标签显示
查看全部 -
【Bootstrap的特性】
响应式设计、栅格布局、完整的类库
JQuery插件、不同的使用场景
【Jetstrap】
专门针对Bootstrap的开发工具：Jetstrap
地址：jetstrap.com
【Btootstrap下载地址】
中文地址：www.bootcss.com
查看全部
举报