当前位置： 云海天教程网 > 技术新闻 > 编程语言 > 正文

Bootstrap基础

  • 作者： 佚名     来源： 网络转载
  • 时间：2019-12-05

一、Bootstrap概述

Bootstrap简介:
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
Boostrap特点
1. 移动设备优先: 自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
2. 所有的主流浏览器都支持 bootstrap, Internet Explorer Firefox Opera Google Chrome Safari
3. 容易上手: 只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习bootstrap
4. 响应式设计: bootstrap的响应式 CSS 能够自适应于台式机、平板电脑和手机。

二、编写响应式页面

1.下载bootstrap
   http://www.bootcss.com/
2. 导入bootstrap.css文件
3.导入jquery.js
4.导入bootstrap.js
   <!--导入css-->
   <link rel="stylesheet" href="css/bootstrap.min.css" />
   <!-- 导入jquery-->
   <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
   <!--导入bootstrap.js -->
   <script type="text/javascript" src="js/bootstrap.min.js" ></script>
5.导入兼容支持移动设备标签
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
6.将所有的内容放到布局容器中
    .container 类用于固定宽度并支持响应式布局的容器。
    <div class="container">
      ...
    </div>
    .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
    <div class="container-fluid">
      ...
    </div>
    测试1: 使用container显示 
    <div class="container">
        <div style="border: 1px solid red;">111111</div>
   </div>
    测试2: 使用container显示 
   <div class="container-fluid">
       <div style="border: 1px solid red;">111111</div>
   </div>

三、Bootstrap的组成

  • 全局css样式
  • 组件
  • js插件

3.1 Bootstrap入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.css" />
</head>
<body>
    <h1>欢迎使用bootstrap</h1>
    <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
</body>
</html>

四、栅格系统

1. Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
注意:Bootstrap将每一行分成12份!
2. Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
3. 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容就可以放入这些创建好的布局中

4.1 媒体查询功能

bootstrap通过媒体查询判断是什么上网设备
1.超小屏幕（ 手机 <768px 没有任何媒体查询相关的代码，因为这在Bootstrap 中是默认的）
2.小屏幕（平板，大于等于 768px） 
       @media (min-width: @screen-sm-min) { ... }
3.中等屏幕（桌面显示器，大于等于 992px）
       @media (min-width: @screen-md-min) { ... }
4.大屏幕（大桌面显示器，大于等于 1200px）
       @media (min-width: @screen-lg-min) { ... }

大屏幕 大于1200          col-lg-
中屏幕 大于992<1200    col-md-
小屏幕 大于768<922     col-sm-
最小屏幕 小于768         col-xs-

4.2 具体案例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <!--1 导入三个标签-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap容器</title>
    <!--2 引入bootstrap的css-->
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <style type="text/css">
        .container{
            background-color: lightskyblue;
            height: 500px;
        }
        .top1 div{
            border: 1px solid red;
        }
        .top2 div{
            border: 1px solid black;
        }
        .top3 div{
            border: 1px solid orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row top1">
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">1</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">2</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">3</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">4</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">5</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">6</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">7</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">8</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">9</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">10</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">11</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">12</div>
        </div>

        <div class="row top2">
            <div class="col-sm-8">1</div>
            <div class="col-sm-4">2</div>
        </div>

        <div class="row top3">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
    </div>
    <!--3引入jQuery-->
    <script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
    <!--4引入bootstrap的js-->
    <script type="text/javascript" src="../js/bootstrap.js" ></script>
</body>
</html>

五、排版

5.1 标题

<h1>我是h1</h1>我是跟随者
<!-- 要写成行内快-->
<span class="h1">我是h1</span>我是跟随者
// 标题: HTML 中的所有标题标签, <h1> 到 <h6> 均可使用。
// 另外，还提供了 .h1 到 .h6 类, 为的是给内联（inline）属性的文本赋予标题的样式。

5.2 强调

// 强调
    <mark>hello</mark>
// 删除
    <del>world</del>

5.3 对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
// 通过文本对齐类, 可以简单方便的将文字重新对齐

5.4 表格

<div class="table-responsive">
        <table class="table table-striped table-bordered table-hover table-condensed">
//table表格     table-striped表格隔行变色     table-striped表格隔行变色
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>

            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>
    </div>

5.5 行状态

通过这些状态类可以为行或单元格设置颜色。
Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作

六、表单

元素都将被默认设置宽度属性为 width: 100%;将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

6.1 基本实例

// 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select>
// 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
// 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
// form-group 会将label和input上下排列 
// form-control 会自动将input填充满屏幕 并添加点击高亮效果
<form>
        <div class="form-group">
            <label for="name">名称</label>
            <input type="text" class="form-control" id="name">
        </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>

6.2 内联表单


// 为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。
// 只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
<form class="form-inline">
        <div class="form-group">
            <label for="test1">Name</label>
            <input type="text" class="form-control" id="test1">
        </div>
        <div class="form-group">
            <label for="test2">Email</label>
            <input type="email" class="form-control" id="test2">
        </div>
        <button type="submit" class="btn btn-default">send</button>
</form>

6.3 水平表单

// 通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，
// 可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为
// 使其表现为栅格系统中的行（row）因此就无需再额外添加 .row 了。
<form class="form-horizontal">
        <div class="form-group">
            <label for="test3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="test3">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox">Remember
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Sign in</button>
            </div>
        </div>
</form>

6.4 单选框和多选框

//通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框
//（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
    </label>
    <label class="radio-inline">
        <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
    </label>
    <label class="radio-inline">
        <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
    </label>
    <label class="radio-inline">
        <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
    </label>

6.5 下拉列表

    <select class="form-control">
        <option>1</option>
        <option>2</option>
    </select>

    <select multiple class="form-control">
        <option>1</option>
        <option>2</option>
    </select>

6.6 静态控件

<form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <p class="form-control-static">email@example.com</p>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
            </div>
        </div>
</form>

6.7 校验状态

1. Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。
2. 使用时添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。
3. 任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

具体示例

<div class="form-group has-success">
        <label class="control-label" for="inputSuccess1">Input with success</label>
        <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
        <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
    </div>
    <div class="form-group has-warning">
        <label class="control-label" for="inputWarning1">Input with warning</label>
        <input type="text" class="form-control" id="inputWarning1">
    </div>
    <div class="form-group has-error">
        <label class="control-label" for="inputError1">Input with error</label>
        <input type="text" class="form-control" id="inputError1">
    </div>
    <div class="has-success">
        <div class="checkbox">
            <label>
                <input type="checkbox" id="checkboxSuccess" value="option1">
                Checkbox with success
            </label>
        </div>
    </div>
    <div class="has-warning">
        <div class="checkbox">
            <label>
                <input type="checkbox" id="checkboxWarning" value="option1">
                Checkbox with warning
            </label>
        </div>
    </div>
    <div class="has-error">
        <div class="checkbox">
            <label>
                <input type="checkbox" id="checkboxError" value="option1">
                Checkbox with error
            </label>
        </div>
    </div>
    添加额外的图标
    你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
    反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。
    需要导入font字体库
    <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess2">Input with success</label>
        <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
        <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>

6.8 按钮


1.按钮颜色, class =  btn 将任何东西变成按钮 需要配合  btn-default a标签也可以
    <!-- Standard button -->
    <button type="button" class="btn btn-default">（默认样式）Default</button>

    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-primary">（首选项）Primary</button>

    <!-- Indicates a successful or positive action -->
    <button type="button" class="btn btn-success">（成功）Success</button>

    <!-- Contextual button for informational alert messages -->
    <button type="button" class="btn btn-info">（一般信息）Info</button>

    <!-- Indicates caution should be taken with this action -->
    <button type="button" class="btn btn-warning">（警告）Warning</button>

    <!-- Indicates a dangerous or potentially negative action -->
    <button type="button" class="btn btn-danger">（危险）Danger</button>

    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
    <button type="button" class="btn btn-link">（链接）Link</button>

    2.成组button
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
            <input type="radio" name="options" id="option1"> 选项 1
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options" id="option2"> 选项 2
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options" id="option3"> 选项 3
        </label>
    </div>

6.9 尺寸

// 使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
    <p>
        <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
        <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
    </p>
    <p>
        <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
        <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
    </p>
    <p>
        <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
        <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
    </p>
    <p>
        <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
        <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
   </p>

6.10 图片形状


// 响应式图片!随着窗体大小改变大小
// 通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。
<img src="" alt="" class="img-rounded">
<img src="" alt="" class="img-circle">
<img src="" alt="" class="img-thumbnail">

6.11 辅助类

情境文本颜色

通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

情境背景色

和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

6.12 浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>

6.13 可见类

(<768px) (≥768px)  (≥992px)(≥1200px)
.visible-xs- 可见 隐藏 隐藏 隐藏
.visible-sm-隐藏 可见 隐藏 隐藏
.visible-md-隐藏 隐藏 可见 隐藏
.visible-lg-隐藏 隐藏 隐藏 可见
.hidden-xs- 隐藏 可见 可见 可见
.hidden-sm- 可见 隐藏 可见 可见
.hidden-md-  可见 可见 隐藏 可见
.hidden-lg- 可见 可见 可见 隐藏