微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

BootStrap

BootStrap安装与使用

  • BootStrap介绍

    官网:http://getbootstrap.com/

    中文网:http://www.bootcss.com/

    BootStrap 是一套现成的CSS样式集合。是两个推特员工干出来的

    BootStrap 是很受欢迎的HTML,CSS和JS框架,用于开发响应式布局,移动设备优先的WEB项目

下载与使用

  • 下载: http://v3.bootcss.com/getting-started

  • 下载完毕后

    • 拷贝dist/css中的bootstrap.min.css到项目css中
    • 拷贝dist/js中的bootstrap.min.js到项目中
  • 下载jquery.js:http://jquery.com/

  • 在html中模版为:

    <!doctype html>
    <html lang="en">
    <head>
        <Meta charset="UTF-8">
        <Meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <Meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    
    </body>
    </html>
    

css使用说明

BootStrap 使用css是使用加类名的方式,控制样式的

布局容器和栅格网格系统

  • 布局容器

    .container 类用于固定宽度并支持响应式布局容器

    .container-fluid 类 占据全部视口的容器

  • 栅格网格系统

    BootStrap 提供了一套响应式,移动设备设备优先的流式栅格系统

    网格系统使用到的css:

    ​ container

    ​ row

    ​ col-md-4(xs,sm,md,lg)

    • 列偏移:不希望两个列紧靠在一起

      ​ col-md-offset-8

    • 列排序:改变浮动方向,设置浮动距离

      ​ col-md-push-*:往后

      ​ col-md-pull-*:往前

      *代表移动列组合数

    • 列嵌套:在列中在嵌套行

常用样式

  • 排版

    • 标题

      标题:使用 <h1> 或 .h1

      标题: 使用 <small> 或 .small

    • 段落

      小字号: <small>

      加粗:<b><strong>

      斜体:<i><em>

    • 强调

      强调是通过颜色来表示的

      • .text-muted:提示,使用浅灰色
      • .text-primary:主要,使用蓝色
      • .text-success:成功,使用浅绿色
      • .text-info:通知信息,使用浅蓝色
      • .text-warning:警告,使用黄色
      • .text-danger:危险,使用褐色
    • 对其效果

      • .text-left
      • .text-right
      • .text-center
      • .text-justyfy
    • 列表

      • 取点列表:.list-unstyled
      • 内联列表: .list-inline (把垂直列表变成水平列表,并且去掉符号)
      • 定义列表:dl-horizontal (制作水平定义列表:当标题宽度超过160px时,将会显示3个省略号)
    • 代码

    • 表格

      • table
      • 基础样式: .table
      • 斑马线表格: .table-striped
      • 带边框的表格: table-bordered
      • 鼠标悬停高亮表格: table-hover
      • 紧凑型表格: table-condensed
      • tr,th,td
      • 悬停应用在行或单元格上: .active
      • 成功操作: .success
      • 信息变化时操作:.info
      • 警告操作:.warning
      • 危险操作: .danger
    • 表单

      • 表单控件

        .form-control .input-lg(较大) .input-sm(较小)

        • 输入框

          .form-control .input-lg(较大) .input-sm(较小)

        • 下拉选择框

          .form-control 多选:multiple=“multiple”

        • 选择框

          • -单选框(直接设置在lable上)

            • radio(垂直排列)
            • radio-inline(水平排列)
          • 多选框(设置在lable的外层div上)

            • check(垂直排列)
            • check-inline(水平排列)
        • 按钮

          • 使用button实现
          • 基础样式: .btn
          • 其他样式: .btn-primary .btn-info .btn-warning .btn-danger .btn-link .btn-default
          • 使用普通标签实现(div ,a)

            直接加class 样式

          • 按钮大小

            .btn-lg

            .btn-sm

            .btn-xs

          • 按钮禁用

            • 通过disabled属性(真正禁用)
            • 通过disabled样式(形式禁用)
      • 表单布局

        • 基本规则

          • 向父 form 标签添加 role=“form”
          • 标签和控件放在一个带有class.form-group的div中
          • 向所有的文本元素input,textarea,select标签添加class=“form-control”
        • 水平表单

          在form表单中class添加属性 form-horizontal

        • 内联表单

          表单内的(label)控件一行显示: 在form表单中class添加属性 form-inline

          所以必须设置label

    • 缩略图

      在列中下的一个div(包含其他内容)中设置class 属性为: thumbnail

    • 面板

      认的 .panel 所做的只是设置基本的边框(border) 和 内补(padding)来包含内容

      ,panel-default

      .panel-heading

      .panel-body

      一个简单的面板

​ -

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐