豪翔天下

Change My World by Program

0%

BootStrap wiki

bootstrap是由Twitter退出的一个用于前端开发的开发工具包,其中包含了许多简洁大方的css样式和实用的js插件,当然,它是移动设备优先的响应式开发方式。

Utilities

  • 有几种常见样式并不存在于utilities里面,如font-size/line-height/height ,建议直接写在html的style里

Border

  • 需要注意的是border不支持breakpoints

  • 设置border-radius

    1
    2
    3
    4
    5
    6
    7
    rounded
    rounded-top
    rounded-right
    rounded-bottom
    rounded-left
    rounded-circle # 圆形
    rounded-0 # 没有圆角

Color

  • 设置字体颜色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .text-primary
    .text-secondary # 深灰色
    .text-success
    .text-danger # 红色
    .text-warning
    .text-info
    .text-light # 浅灰色
    .text-dark # 黑色
    .text-muted
    .text-white
  • 设置背景颜色

    1
    2
    3
    .bg-secondary	# 深灰色
    .bg-light # 浅灰色
    .bg-dark # 黑色

Cursor

  • 只要给元素加上role="button"即可增加cursor: pointer属性

Display

  • 以d开头
  • 可取的值有none、inline、inline-block、block、table、table-cell、table-row、flex、inline-flex
屏幕尺寸
只在lg隐藏 d-lg-none d-xl-block
在lg和xl隐藏 d-lg-none d-xl-none
只在xl隐藏 d-xl-none
只在lg显示 d-none d-lg-block d-xl-none
在lg和xl显示 d-none d-lg-block d-xl-block
只在xl显示 d-none d-xl-block

Flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse

Sizing

  • 不支持breakpoint

  • 宽度

    1
    2
    3
    4
    w-25
    w-50
    w-75
    w-100 # width: 100%
  • 高度

    1
    2
    3
    4
    h-25
    h-50
    h-75
    h-100 # height: 100%

Positoin

1
2
3
4
5
position-static
position-relative
position-absolute
position-fixed
position-sticky

Spacing

  • m表示margin,p表示padding
  • t、b、l、r分表表示top、bottom、left、right
  • x表示水平方向left和right
  • y表示垂直方向top和bottom
  • 可以加上响应式参数{property}{sides}-{breakpoint}-{size}
  • size的取值有0、1、2、3、4、5、auto

Text

  • align item

    1
    2
    3
    4
    5
    align-item-center
    align-item-start
    align-item-end
    align-item-baseline
    align-item-stretch
  • text alignment

    1
    2
    3
    4
    5
    6
    7
    text-left
    text-center
    text-right

    # 添加breakpoint
    text-sm-left
    text-md-left
  • font weight

    1
    2
    3
    4
    5
    font-weight-bolder
    font-weight-bold # 700
    font-weight-normal # font-weight: 400
    font-weight-light
    font-italic # 斜体
  • wrap

    1
    2
    text-nowrap
    text-truncate # 截断,用省略号表示
  • justify-content

    1
    2
    justify-content-center
    justify-content-between
  • vertical-align

    1
    align-middle	# vertical-align: middle

特殊功能(使用Tips)

  • 下拉选择列表(需要bootstrap.js)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="form-group">
    <label for="sel1">Select list:</label>
    <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    </select>
    </div>
  • input的属性(居然没有哪个地方写了的,我也是醉了,难道只有我没有找到,还是只有我什么基础都没有还来用bootstrap):

    1
    2
    3
    <input placeholder="Enter email">   placeholder属性表示在输入框内预先显示的文字
    <input type="email"> type会影响到该输入框的展现形式,它的值可以是checkbox、email、file、password、text(文本输入框)
    <input class="form-control"> input只有加了这个类才会呈现得好看一点,并且默认宽度会变成100\%
  • 表单里面点击按钮禁止跳转,不要讲button的type设置为subbmit或者不设置,必须将其设置为type="button"才不会强制刷新当前页面

  • 使用jquery控制carousel跳转:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $('.carousel-control').click(function(e){
    e.stopPropagation();
    var goTo = $(this).data('slide');
    if(goTo=="prev") {
    $('#carousel-id').carousel('prev');
    } else {
    $('#carousel-id').carousel('next');
    }
    });

常用网址

百度的CDNhttp://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js 全局CSS样式http://v3.bootcss.com/css/ 组件http://v3.bootcss.com/components/ JavaScript插件http://v3.bootcss.com/javascript/ jQuery UI Bootstraphttp://www.bootcss.com/p/jquery-ui-bootstrap/ Glyphicons字体图标http://v3.bootcss.com/components/#glyphicons 实例精选(几个简单的模板)http://v3.bootcss.com/getting-started/#examples

坚持原创技术分享,谢谢支持

欢迎关注我的其它发布渠道