bootstrap学习

bootstrap简介

一、概述

bootstrap的特点

  • 移动设备优先：对移动设备的支持友好；
  • 响应式设计：得益于先进的网格系统，可以更好的支持响应式的网页设计；
  • 有很多可重用的组件和基于 jquery 的插件；

二、helloworld

一个简单的响应式页面

<!DOCTYPE html>
<html lang="en">
<head>
    <title>hello</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <div class="jumbotron">
        <h1>我的第一个 Bootstrap 页面</h1>
        <p>重置窗口大小，查看响应式效果！</p>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <h3>第一列</h3>
            <p>学的不仅是技术，更是梦想！</p>
            <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
        </div>
        <div class="col-sm-4">
            <h3>第二列</h3>
            <p>学的不仅是技术，更是梦想！</p>
            <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
        </div>
        <div class="col-sm-4">
            <h3>第三列</h3>
            <p>学的不仅是技术，更是梦想！</p>
            <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
        </div>
    </div>
</div>

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

推荐 CDN

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

 

bootstrap-CSS

一、网格系统

1、网格系统概述

  • Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸增加，系统会自动分为最多12列；
  • 基础的 CSS 是移动设备优先(超小设备默认没有媒体查询)，媒体查询是针对于平板台式电脑，随着屏幕大小的增加而添加元素；

2、网格系统基本结构

  • 基本结构：container----row----col；
  • 不同设备的 class 前缀：col-xs-（超小设备）、col-sm-（小设备） 、col-md-（中型设备）、col-lg（大型设备）

3、列重置 | 偏移 | 嵌套 | 排序

  • 响应式列重置
<div class="container">
    <div class="row" >
        <div class="col-xs-6 col-sm-3" 
            style="background-color: #dedef8;
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut. 
            </p>
        </div>
 
        <div class="clearfix visible-xs"></div>
 
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;
        box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
        </div>
        <div class="col-xs-6 col-sm-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim 
            </p>
        </div>
    </div>
</div>
  • 列偏移
<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-md-6 col-md-offset-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
            </p>
        </div>
    </div>
</div>
  • 列嵌套
<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第一列</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </p>
        </div>
        <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第二列 - 分为四个盒子</h4>
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        Consectetur art party Tonx culpa semiotics. Pinterest 
        assumenda minim organic quis.
                    </p>
                </div>
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                         sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        quis nostrud exercitation ullamco laboris nisi ut 
        aliquip ex ea commodo consequat.
                    </p>
                </div>
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
  • 列排序
<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <p>
            排序前
        </p>
        <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
        </div>
        <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
        </div>
    </div>
    <br>
    <div class="row">
        <p>
            排序后
        </p>
        <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
        </div>
        <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
        </div>
    </div>
</div>

二、bootstrap排版

1、文本对齐

<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>

2、列表样式

<h4>水平无序列表</h4>
<ul class="list-inline">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
     <dt>Description 1</dt>
     <dd>Item 1</dd>
     <dt>Description 2</dt>
     <dd>Item 2</dd>
</dl>

3、其他排版样式参考

三、bootstrap表格和表单

1、表格

  • 表格类：
类描述
.table 为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
  • tr、td、th类：
类描述
.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作

2、表单

（1）bootstrap 提供的表单布局：垂直表单（掌握-默认）、内联表单、水平表单

<form role="form">
  <div class="form-group">
    <label for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">
  </div>
  <div class="form-group">
    <label for="inputfile">文件输入</label>
    <input type="file" id="inputfile">
    <p class="help-block">这里是块级帮助文本的实例。</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">请打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

（2）表单控件：常用控件、禁用控件、控件大小

<!--禁用控件-->
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">禁用</label>
    <div class="col-sm-10">
      <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
    </div>
  </div>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput" class="col-sm-2 control-label">禁用输入（Fieldset disabled）</label>
      <div class="col-sm-10">
        <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
      </div>
    </div>
    <div class="form-group">
      <label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）</label>
      <div class="col-sm-10">
        <select id="disabledSelect" class="form-control">
          <option>禁止选择</option>
        </select>
      </div>
    </div>
  </fieldset>
</form>
<!--控件大小-->
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<div class="row">
    <div class="col-lg-2">
        <input type="text" class="form-control" placeholder=".col-lg-2">
    </div>
    <div class="col-lg-3">
        <input type="text" class="form-control" placeholder=".col-lg-3">
    </div>
</div>

 

四、bootstrap按钮和图片

1、按钮

（1）按钮标签：bootstrap 的按钮样式可以用在 a、input、button 标签上，但最好还是用在 button 上

<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">

（2）按钮基本样式：大小（btn-lg、btn-sm、btn-xs）、状态（active、disabled）、特殊意义（btn-warning、btn-success）

（3）按钮组（btn-group）：垂直方向按钮组（btn-group-vertical）、自适应大小（btn-group-justified）

<!--内嵌下拉菜单-->
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
  Sony <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
  </ul>
</div>

2、图片：img-rounded（圆角方形）、.img-circle（圆形）、img-thumbnail（方形有框）、img-responsive（响应式）

 

五、辅助类和响应式实用工具

1、辅助类：关闭按钮、插入符、浮动、居中、显示和隐藏、屏幕阅读器等

<!--浮动清除-->
<div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
    <div class="pull-left" style="background:#58D3F7;">
          向左快速浮动
       </div>
       <div class="pull-right" style="background: #DA81F5;">
          向右快速浮动
       </div>
</div>

2、响应式实用工具：根据设备类型的不同对元素进行显示和隐藏（慎用，且只适用于块和表切换）：hidden-xs、visible-xs、visible-xs-block、visible-print-block

 

bootstrap-布局组件

 

bootstrap-jquery插件

一、模态框（modal）

1、简介：模态框（Modal）是覆盖在父窗体上的子窗体，用来显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动，子窗体可提供信息、交互等；

2、用法

  • data属性：button 或者 a 标签上设置 Data属性，data-toggle=‘modal’，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的模态框；
  • js实现：$('#identifier').modal(options)
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

3、选项：backdrop、keyboard、show、remote

  • data属性：data-keyboard = ‘true’
  • js实现：$('#identifier').modal(｛keyboard：false｝)   作用是激活模态框传递相应的参数

4、方法（show、hide、toggle）：$('#identifier').modal('toggle')

5、事件（show|shown|hide|hidden.bs.modal）:$('#identifier').on('hide.bs.modal', function () {// 执行一些动作...})

 

二、下拉菜单（dropdown）

1、简介：可以向任何组件（导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单

2、用法

  • data属性：向链接（a）或按钮（button）添加 data-toggle="dropdown" 来切换下拉菜单
  • js实现：$('.dropdown-toggle').dropdown()
<ul class="nav navbar-nav">
    <li class="active"><a href="#">iOS</a></li>
    <li><a href="#">SVN</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Java 
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">jmeter</a></li>
            <li><a href="#">EJB</a></li>
            <li><a href="#">Jasper Report</a></li>
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
            <li class="divider"></li>
            <li><a href="#">另一个分离的链接</a></li>
        </ul>
    </li>
</ul>

3、方法：$().dropdown('toggle')  好像只能实现默认显示下拉菜单

 

三、滚动监听（Scrollspy）

1、简介：根据滚动条的位置自动更新对应的导航目标，其基本原理是随着滚动，基于滚动条的位置向导航栏添加 .active class

2、用法

  • data属性：data-spy="scroll" data-target="#navbar-example" data-offset="0"，给要监听的元素（通常是body，但是不绝对）加上前面的data 属性，data-offset 是可选的；
  • js实现：$('#spy').scrollspy({ target: '#navbar-example' });

3、选项：offset（当计算滚动位置时，距离顶部的偏移像素）

4、方法【scrollspy('refresh')】：文档上的叙述是当有 dom 的添加和删除的时候需要调用刷新，但实测好像不用这个方法也没啥问题；

5、事件：activate.bs.scrollspy

 

四、其他插件参考（基本都是根据以上的要点来学）：http://www.runoob.com/bootstrap/bootstrap-buttons.html

posted on 2019-04-03 14:56  狗吃鱼  阅读(211)  评论(0)  编辑  收藏  举报

导航