前端之Bootstrap(二)

时间  2019-12-08
标签 前端 bootstrap 栏目 Bootstarp 繁體版
原文   原文链接

 

 

布局容器与栅格系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <style>
        .c1 {
            background-color: red;
            height: 50px;
            border: 3px solid black;
        }
        @media screen and (max-width: 600px) {
            .c1 {
            background-color: green;
            height: 50px;
            border: 3px solid black;
        }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-xs-6 c1"></div>
        <div class="col-md-6 col-xs-6 c1"></div>
        <br>
        <div class="col-md-3 c1"></div>
        <div class="col-md-9 c1"></div>
        <br>
        <div class="col-md-1 c1">
            <div class="row">
                <div class="col-md-6 c1"></div>
                <div class="col-md-6 c1"></div>
            </div>
        </div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>

    </div>
    <div class="row">
        <div class="col-md-9 c1"></div>
    </div>
</div>
</body>
</html>

效果

Bootstrap 须要为页面内容和栅格系统包裹一个 .container 容器。咱们提供了两个做此用处的类。注意，因为 padding 等属性的缘由，这两种 容器类不能互相嵌套。css

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

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据所有视口（viewport）的容器。jquery

<div class="container-fluid">
  ...
</div>

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增长，系统会自动分为最多12列。它包含了易于使用的预约义类，还有强大的mixin 用于生成更具语义的布局。bootstrap

 

栅格系统用于经过一系列的行（row）与列（column）的组合来建立页面布局，你的内容就能够放入这些建立好的布局中。下面就介绍一下 Bootstrap 栅格系统的工做原理：ide

 

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 经过“行（row）”在水平方向建立一组“列（column）”。
  • 你的内容应当放置于“列（column）”内，而且，只有“列（column）”能够做为行（row）”的直接子元素。
  • 相似 .row 和 .col-xs-4 这种预约义的类，能够用来快速建立栅格布局。Bootstrap 源码中定义的 mixin 也能够用来建立语义化的布局。
  • 经过为“列（column）”设置 padding 属性，从而建立列与列之间的间隔（gutter）。经过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
  • 负值的 margin就是下面的示例为何是向外突出的缘由。在栅格列中的内容排成一行。
  • 栅格系统中的列是经过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可使用三个 .col-xs-4 来建立。
  • 若是一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被做为一个总体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 而且针对小屏幕设备覆盖栅格类。 所以，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 而且针对小屏幕设备覆盖栅格类。 所以，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
  超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 老是水平排列 开始是堆叠在一块儿的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12
最大列（column）宽 自动 ~62px ~81px ~97px
槽（gutter）宽 30px （每列左右均有 15px）
可嵌套 是
偏移（Offsets） 是
列排序 是

 

 

列偏移

使用 .col-md-offset-* 类能够将列向右侧偏移。这些类实际是经过使用 * 选择器为当前元素增长了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。布局

<div class="row">
  <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 class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

 

表格

为任意 <table> 标签添加 .table 类能够为其赋予基本的样式 — 少许的内补（padding）和水平方向的分隔线。这种方式看起来不少余！？可是咱们以为，表格元素使用的很普遍，若是咱们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，因此咱们选择将此样式独立出来。学习

经过 .table-striped 类能够给 <tbody> 以内的每一行增长斑马条纹样式。字体

添加 .table-bordered 类为表格和其中的每一个单元格增长边框。网站

经过添加 .table-hover 类可让 <tbody> 中的每一行对鼠标悬停状态做出响应。ui

 标识颜色的类，以下表：

Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动做
.info 标识普通的提示信息或动做
.warning 标识警告或须要用户注意
.danger 标识危险或潜在的带来负面影响的动做

添加类后的效果

鼠标在张三处悬停的效果（颜色加深），表的记录用颜色类装饰。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
         .c1 {
            background-color: red;
            height: 50px;
            border: 3px solid black;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <table class="table table-hover table-bordered table-striped">
                <thead>
                    <tr class="info">
                        <th>name</th>
                        <th>password</th>
                        <th>hobby</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="danger">
                        <td class="text-center">张三</td>
                        <td>123</td>
                        <td>学习</td>
                    </tr>
                    <tr class="warning">
                        <td>李四</td>
                        <td>123</td>
                        <td>学习</td>
                    </tr>
                    <tr class="success">
                        <td>王五</td>
                        <td>123</td>
                        <td>学习</td>
                    </tr>
                    <tr class="active">
                        <td>赵六</td>
                        <td>123</td>
                        <td>学习</td>
                    </tr>
                </tbody>
            </table>
</div>
</body>
</html>

表单

单独的表单控件会被自动赋予一些全局样式。全部设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中能够得到最好的排列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>

        .c1 {
            margin-top: 100px;
        }

        body {
            background-color: #EEEEEE;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4 c1">
            <form class="form-horizontal">
                <div class="form-group has-error">
                    <h1 class="text-center">会员登陆 <span class="glyphicon glyphicon-user"></span></h1>
                    <label for="inputEmail3" class="col-sm-3 control-label ">用户名</label>
                    <div class="col-sm-9 ">
                        <input type="email" class="form-control " id="inputEmail3" placeholder="用户名">
                        <span class="error help-block">用户名错误</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-9">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="密码">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Remember me
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <button type="submit" class="btn btn-primary active">Sign in<i class="fa fa-bath" aria-hidden="true"></i></button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $('input').on('focus',function () {
        $(this).next().text('').parent().parent().removeClass('has-error')
    })
</script>

用原生JavaScript语句实现了鼠标聚焦在输入框时，提示信息“用户名错误”清空。

button按钮

为 <a>、<button> 或 <input> 元素添加按钮类（button class）便可使用 Bootstrap 提供的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <button class="btn btn-success">button</button>
            <button class="btn btn-info">button</button>
            <button class="btn btn-warning">button</button>
            <button class="btn btn-danger">button</button>
            <button class="btn btn-primary">button</button>
            <a href="http://www.xiaohuar.com" class="btn btn-primary">Link</a>
        </div>
    </div>
</div>
</body>
</html>

能够添加不一样的按钮样式，而且把a标签装饰成按钮的形式，美化布局。

按钮的尺寸

btn-lg 大按钮
btn-primary 默认尺寸
btn-sm 小按钮
btn-xs 超小尺寸

下面介绍bootstrap的组件


Glyphicons 字体图标

 

复制名称，做为类添加到标签中，就像设置字体那样设置图案样式。

导航条

导航条是在您的应用或网站中做为导航页头的响应式基础组件。它们在移动设备上能够折叠（而且可开可关），且在视口（viewport）宽度增长时逐渐变为水平展开模式。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

modal.js 模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

原理与CSS的z-index相同，可是用bootsrap能够实现更好看的效果

。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程