Bootstrap

作者: Snackk | 来源:发表于2018-10-25 22:34 被阅读0次

第一个bootstrap模板样式

移动端优先

<meta name="viewport" content="width=device-width, initial-scale=1">

所有bootstrap js插件前先放jquery.js框架

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="jquery.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap-3.3.7/js/bootstrap.js"></script>

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
  
    <div class="container-fluid" style="height: 1000px;background-color: red">
      <div class="row">
        <div class="col-md-6" style="background-color: green;height: 100px"></div>
        <div class="col-md-6" style="background-color: black;height: 100px"></div>
        </div></div>
        
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="jquery.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap-3.3.7/js/bootstrap.js"></script>
  </body>
</html>

Normalize.css

为了增强跨浏览器表现的一致性，我们使用了 Normalize.css。

布局容器（宽度布局）

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

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

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

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

栅格系统

所有“列（column）必须放在 ” .row 内。

只有列能作为行的直接子元素

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。系统会自动分为最多12列。只定义类12个样式类

1. row表示行，必须放在container或container-fluid中
2. row被均分成12列， 列的语法是col-xx-**
    xx的取值范围：xs（手机）->sm（平板）->md（中等屏幕，台式电脑）->lg（超大屏）
    **的取值范围：1~12
3. 只有列能作为行的直接子元素

媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        .c1 {
            background-color: red;
            height: 200px;
        }
        /*媒体查询 在宽度小于700px的时候使用这个css*/
        @media screen and (max-width: 700px) {
            .c1 {
                background-color: green;
            }
        }
    </style>
</head>
<body>

<div class="c1">

</div>
</body>
</html>

列偏移(居中，右移动)

col-xx-offset-**

.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

    <div class="row">
            <div class="col-md-4 col-md-offset-4 col-xs-offset-4" style="background-color: deeppink;height: 100px"></div>
          </div>

嵌套列

任意一列，都可以在内部在定义row,均分成12份

列排序(推（push），拉（pull）)

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<div class="row">
        <div class="col-md-4 col-md-push-8" style="background-color: deeppink;height: 100px"></div>
        <div class="col-md-8 col-md-pull-4" style="background-color: orange;height: 100px"></div>
      </div>

排版

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
<div class="container">
    <h1>来了，就是深圳人！
        <small>别想走！</small>
    </h1>
</div>
</body>
</html>

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

.lead 类可以让段落突出显示。

<p class="lead">...</p>

Marked text（让字体高亮的显示）

You can use the mark tag to <mark>highlight</mark> text.

被删除的文本

<del>This line of text is meant to be treated as deleted text.</del>

无用文本

<s>This line of text is meant to be treated as no longer accurate.</s>

插入文本
额外插入的文本使用 <ins> 标签。

带下划线的文本
为文本添加下划线，使用 <u> 标签

小号文本
<small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。

着重
通过增加 font-weight 值强调一段文本。

<strong>rendered as bold text</strong>

斜体
用斜体强调一段文本。

<em>rendered as italicized text</em>

对齐

<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>

改变大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。

<abbr title="attribute">attr</abbr>

首字母缩略语
为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。

<address>
      <strong>knight Plan</strong><br>
      平山村 世外桃源创意园<br>
      深圳市南山区, 0755<br>
      <abbr title="Phone">Phone:</abbr> (123) 456-7890
    </address>

    <address>
      <strong>张大大</strong><br>
      <a href="mailto:#">zhangdd@oldboyedu.com</a>
    </address>

引用

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。

    <blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

列表

无序列表

<ul>
<li>...</li>
</ul>

有序列表

<ol>
 <li>...</li>
</ol>

无样式列表

    <ul class="list-unstyled">
  <li>...</li>
</ul>

内联列表

    <ul class="list-inline">
  <li>...</li>
</ul>

描述
带有描述的短语列表。

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

代码

内联代码
通过 <code> 标签包裹内联样式的代码片段。

用户输入
通过 <kbd> 标签标记用户通过键盘输入的内容。

代码块
多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。

变量
通过 <var> 标签标记变量。

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

程序输出
通过 <samp> 标签来标记程序输出的内容。

表格

基本实例
为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

<table class="table">
  ...
</table>

条纹状表格
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

<table class="table table-striped">
  ...
</table>

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

<table class="table table-bordered">
  ...
</table>

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

<table class="table table-hover">
  ...
</table>

紧缩表格

<table class="table table-condensed">
  ...
</table>

状态类
通过这些状态类可以为行或单元格设置颜色。

Class 描述

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

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

表单

输入框
包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

按钮

让一个人毁灭之前,先让其膨胀

Bootstrap常用组件

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

内置图标
使用span标签加class

<span class="glyphicon glyphicon-search"></span>

fontawesome图标
使用i标签加class

<i class="fa fa-wechat" style="color: green"></i>

您可以将Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀 fa ，再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ，因为它更简洁。但实际上使用 <span> 才能更加语义化。

使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类来放大图标。

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x

使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。尤其在列表或导航时起到重要作用。

<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>

使用 fa-spin 类来使任意图标旋转，现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog 。

<i class="fa fa-spinner fa-spin"></i>

组合使用

如果想要将多个图标组合起来，使用 fa-stack 类作为父容器， fa-stack-1x 作为正常比例的图标， fa-stack-2x 作为大一些的图标。

 <span class="fa-stack fa-lg">
  <i class="fa fa-heartbeat fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>

Font Awesome 完全兼容 Bootstrap 的所有组件。

<button class="btn btn-danger"><i class="fa fa-trash-o"></i> 删除</button>

下拉菜单：

在body中需要导入才有相应动作
新的css文件能覆盖上面的bootstrap.css文件信息

<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>

（html）
.
.
.
<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>

导航条通常不放在container中

滚动条实例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>


<div class="container">
    <div class="progress">
        <div id="p1" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar"
             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;min-width: 2%">
            0%
        </div>
    </div>
    <button class="btn btn-success btn-sm" id="b1">开始</button>
</div>


<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
<script>
    var n = 0;
    var t;

    // jQuery操作标签的CSS属性
    function foo() {
        $('#p1').css('width', n + '%').text(n + '%');
        n += 1;
        if (n > 100) {
            clearInterval(t);
        }
    }

    // 点击开始按钮，让滚动条滚动起来
    $('#b1').click(function () {
        // 每隔一秒钟执行一下上面的代码
        t = setInterval(foo, 100);
    });

</script>
</body>
</html>

iframe标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>

<!-- 16:9 aspect ratio -->
<div style="height: 400px;width: 600px">
  <iframe class="embed-responsive-item" src="https://www.luffycity.com"></iframe>
</div>


<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>

信息搜集卡

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h1>信息收集卡
                    <small>共三步</small>
                </h1>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                     aria-valuemax="100" style="width: 33.33%;">
                    1/3
                </div>
            </div>
            <!--面板-->
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">基本信息<span class="glyphicon glyphicon-pushpin pull-right"></span></h3>

                </div>
                <div class="panel-body">
                    <!--表单-->
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="inputEmail1" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-4">
                                <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword2" class="col-sm-2 control-label">Password</label>
                            <div class="col-sm-4">
                                <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-4">
                                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                            <div class="col-sm-4">
                                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputFile" class="col-sm-2 control-label">Password</label>
                            <div class="col-sm-4">
                                <input type="file" class="" id="inputFile" placeholder="Password">
                                <span class="help-block">只支持png</span>
                            </div>
                        </div>
                        <hr>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">属性</div>
                            <div class="col-sm-4">
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"
                                               checked>
                                        我是一个好人
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                         我是一个坏人
                                    </label>
                                </div>
                                <div class="radio disabled">
                                    <label>
                                        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3"
                                               disabled>
                                        我不是一个人
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!--下一步按钮-->
            <div>
                <button class="btn btn-success pull-right">下一步</button>
            </div>
        </div>
    </div>
</div>


<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>

JS插件示例

1.模态框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>



<div class="container">
    <!-- 触发模态框的按钮 -->
    <button type="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">
  <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">标题</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>

</form>
      </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>
  </div>
</div>


</div>
<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
<script>
    $('#myModal').modal({
        backdrop: 'static',
    })
</script>
</body>
</html>

2.轮播图(carousel)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="banner/banner_1.jpg" alt="...">
      <div class="carousel-caption">
        学不会怨老师
      </div>
    </div>

    <div class="item">
      <img src="banner/banner_2.jpg" alt="...">
      <div class="carousel-caption">
        学会了苑老师
      </div>
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>



<script src="jquery.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
<script>
  <!--设置轮播图的轮状时间-->
  $('.carousel').carousel({
      interval: 3000
  })
</script>
</body>
</html>

[[ctrl]]+[[r]] 弹出搜索框替换相应文本

Bootstrap

表单

按钮

JS插件示例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读