bootstrap的一些笔记和大纲

Bootstrap

学习Bootstrap的一些笔记和大纲，仅供自己复习使用。

 

https://getbootstrap.com/docs/3.3/components/

https://www.runoob.com/bootstrap/bootstrap-tutorial.html

（两个可以查询插件的网站）

https://www.jianshu.com/p/956065291d53 栅格布局（写的很清楚）

https://getbootstrap.com/docs/3.3/components/#nav  glyphicon的内容

 

文本

text-left

text-center

text-right

text-lowercase

text-uppercase

 

表格

全屏表格 .table

带边框表格 .table-bordered

条纹状表格 .table-striped //一行白一行灰

悬停变色 .table-hover //鼠标放在上面会变深灰

紧凑风格 .table-condensed

给行添加颜色 .danger //浅紫色

 .warning //浅黄色

 .info //浅蓝色

 .success //浅绿色

 .active //深灰

 

表单

圆角输入框 .form-control //圆角输入框且点击时边框变浅蓝色

表单组合 .form-group //会有边距等设置

给表单中几个div设置 .form-inline  //合并在一行排列

表单大小 .input-lg和.input-sm //放大和缩小

改标颜色 .has-success .has-warning .has-error

label标签改变状态 .control-label

 

按钮

圆角按钮 .btn

鼠标放上变色 .btn-default

一些颜色 .btn-success  .btn-primary  .btn-info  .btn-warning  .btn-danger

去除边框 .btn-link

改变大小 .btn-lg  .btn-sm

显示按下去的效果 .active

全屏大小按钮 .btn-block

按钮禁用 disabled=”disabled”

图片形状

圆角 .img-rounded

圆形 .img-circle

带有边框的圆角图形 .img-thumbnail

 

栅格布局（屏幕排版）

@media screen and (max-width: 900px) and (min-width: 500px) {

选择器{}

}

 

屏幕分成12份 .col-lg-3表示在大屏幕时占屏幕3份（大台式电脑，1200px 起）

  .col-md-4表示在中等屏幕时占屏幕4份（台式电脑，992px 起）

  .col-sm-6表示在小屏幕时占屏幕6份（平板电脑，768px 起）

     .col-xs-12表示手机端占满屏幕（手机，小于 768px）

.col-lg-offset-3表示在大屏幕时便宜左侧3份，其余屏幕大小同理加offset

1em=16px（但不完全是）

bootstrap的fonts里也含有字体图标

@font-face {

  font-family: 'Glyphicons Halflings';

  src: url('/fonts/glyphicons-halflings-regular.eot');

  src: url('/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 

url('/fonts/glyphicons-halflings-regular.woff') format('woff'), 

url('/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 

url('/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

把fonts文件夹复制到html同级文件夹中，然后在head的style中加上这段话，再用空span直接加上class=“上方链接中的图标名”

给输入框加 .form-control可以在获得聚焦的时候边框发蓝光

 

下拉框

下拉组件 .dropdown

右对齐 .dropdown-menu-right代替.pull-right

分割线 divider

bootstrap里的js依赖jquery要自行下载正确版本放到文件夹中，二者都要引入到script中

 

下拉框写法

<div class=”dropdown”>

<button class=”btn btn-default dropdown-toggle” data-toggle=”dropdown”>

这是按钮

<span class=”caret”></span> //一个下拉箭头

</button>

<ul class=”dropdown-menu”>

<li>

<a href=”#”>选项一</a>

</li>

</ul>

</div>

 

给输入框加 .input-group

还可以用<span class=”input-group-addon”>此处写前置提示内容</span>

 

导航

无序导航 .nav（必须包含，和btn类似）

可切换的导航 .nav-tabs

胶囊导航 .nav-pills

垂直导航 .nav-justified

选中效果 .active

 

分页导航

分页 .pagination

翻页 .pager

放在左边 .previous

放在右边 .next

 

进度条

进度条 .progress

进度条进度 .progress-bar

进度条颜色渐变 .progress-bar-striped

<div class=”progress”>

<div class=”progress-bar progress-bar-success” style=”width:60%;”>

60%

</div>

</div>

 

列表

ul上加 .list-group

li上加 .list-group-item

可以在li里加 <span class=”badge”>10</span> 会出现那种提示标签

在前一个标签里加disable让他不可操控

 

面板

面板大框 .panel .panel-default

 

模态框

点击后跳出来的弹窗 .modal