BootStrap初始

序言

什么是Bootstrap

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

它是为实现快速开发Web应用程序而设计的一套前端工具包。

它支持响应式布局，并且在V3版本之后坚持移动设备优先。

Bootstrap的历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

为什么要用Bootstrap

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

在Bootstrap出现之前：

命名：重复、复杂、无意义（想个名字费劲）

样式：重复、冗余、不规范、不和谐

页面：错乱、不规范、不和谐

在使用Bootstrap之后：各种命名都统一并且规范化。页面风格统一，画面和谐。

Bootstrap 包的内容

起步(基本结构)：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
全局CSS样式：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
网站实例：提供大量的精美网站设计供程序员参考

下载及引用操作

下载地址:

官方地址：https://getbootstrap.com

中文地址：http://www.bootcss.com/

我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。

1 进入网站首页后点击起步

2 进入页面后点击下载(用于生产环境的Bootstrap)

下载完毕后解压到当前文件夹

点击第一个

出现下面的文件夹

上面的文件夹在编写程序的时候主要用到以下的几个文件：

css文件夹中

js文件夹中

引入Bootstrap文件

直接把整个下载好的Bootstrap文件夹复制到相应的文件里即可

在具体的HTML文件中上图的位置引入Bootstrap文件

处理依赖

由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。

Bootstrap基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">          //字符编码
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    //涉及到IE浏览器 建议使用EDEE
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

需要导入的文件是Respond.js

  </head
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

js内容书写位置

css部分讲解

一页面设置

需要页面设置为 HTML5 文档类型

二移动设备自适应标签

为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

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

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

三  container(容器)示例

.container 类用于固定宽度并支持响应式布局的容器。在浏览器的左右俩边都会留有一定的间距

效果如下：

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。会铺满整个浏览器

效果如下：

四栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

“行（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-* 不存在，也影响大屏幕设备。

 栅格系统格式：

<body>
<div class="container-fluid/container">
    <div class="row" style="background-color: red">       所有的行必须包含在container-fluid/container当中
        <div class="col-md-1" style="border: 1px solid black">111</div>    每一行可以包含多个列   最多包含12列(即示例中最多有12个div)
　　　　如果超出12列就会另外再起一行超出几列下一行就有几列
        <div class="col-md-1" style="border: 1px solid black">222</div>   列的格式：class="col-xs-2/col-sm-1/col-md-3/col-lg-2"
    </div>
　　
   
     <div class="row" style="background-color: red">

        <div class="col-md-6" style="border: 1px solid black">111</div>   一行中列的宽度控制：型号后的数字的范围1~12
        <div class="col-md-6" style="border: 1px solid black">222</div>   
    </div>

    <div class="row" style="background-color: red">
        <div class="col-md-8" style="border: 1px solid black">111</div>
        <div class="col-md-4" style="border: 1px solid black">222</div>
    </div>

//响应式列的自适应宽度
    <div class="row" style="background-color: green">    
        <div class="col-xs-8 col-md-12" style="border: 1px solid black">111</div>
　　　　//当列的宽度小于一定范围的时候会自动变成col-xs-8的格式 当列的宽度大于一定的范围的时候会自动变成col-md-12的格式
        <div class="col-xs-4 col-md-12" style="border: 1px solid black">222</div>
　　　　//同上
    </div>
</div>
</body>

列的示例及详解

<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, maximum-scale=1, user-scalable=no">
    <title>列示例</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">   首先所有的内容必须包含在container中
    <div class="row" style="background-color: hotpink">   //设置一行
        <div class="col-md-6" style="background-color: red">  //设置一行中的一列宽度为6

            <div class="col-md-1" style="background-color: green">111</div>   //在上列中嵌套多列
            <div class="col-md-1" style="background-color: green">222</div>
            <div class="col-md-1" style="background-color: green">333</div>
            <div class="col-md-1" style="background-color: green">444</div>
        </div>
    </div>
</div>
</body>
</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, maximum-scale=1, user-scalable=no">
    <title>09-CSS媒体查询示例</title>
    <style>
        .c1 {
            background-color: red;
        }

        @media screen and (max-width: 600px){
            .c1 {
                background-color: green;
            }
        }
    </style>
</head>
<body>


<div class="c1" style="height: 400px;width: 400px"></div>
</body>
</html>

参数详情：

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

列的偏移及排序

<div class="container">
    <div class="row">
        <div class="col-md-3 col-md-offset-3" style="background-color: red">111</div>
　　　　.col-md-offset-3 将 .col-md-4 元素向右侧偏移了3个列（column）的宽度
    </div>

    <!--列排序-->
以文档的左边为基准push是推pull是拉  向右移动用push向左移动用pull
    <div class="row">
      <div class="col-md-9 col-md-push-3">本来应该在左边.col-md-9 .col-md-push-3</div>   向右推4列
      <div class="col-md-3 col-md-pull-9">本来应该在右边.col-md-3 .col-md-pull-9</div>   向左拉3列
    </div>
</div>

Bootstrap全局样式

排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式。

我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。

排版

标题相关

<h1>一级标题36px</h1>
<h2>二级标题30px</h2>
<h3>三级标题24px</h3>
<h4>四级标题18px</h4>
<h5>五级标题14px</h5>
<h6>六级标题12px</h6>
<!--除了使用h标签，Bootstrap内置了相应的全局样式-->
<!--内联标签应用标题样式-->
<span class="h1">一级标题36px</span>
<span class="h2">二级标题30px</span>
<span class="h3">三级标题24px</span>
<span class="h4">四级标题18px</span>
<span class="h5">五级标题14px</span>
<span class="h6">六级标题12px</span>

副标题

<!--一级标题中嵌入小标题-->
<h1>一级标题<small>小标题</small></h1>

文本对齐

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

文本大小写

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

表格

Class	描述
.table-striped	条纹状表格
.table-bordered	带边框的表格
.table-hover	鼠标悬停变色的表格
.table-condensed	紧缩型表格
.table-responsive	响应式表格

状态类

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

表单

内联表单

表单状态

带图标的表单

按钮

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

按钮样式

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

按钮大小

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

图片

<img src="..." class="img-responsive" alt="Responsive image">

图片形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

辅助类

文本颜色

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>

关闭按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

下拉三角

<span class="caret"></span>

快速浮动

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

内容块居中

<div class="center-block">...</div>

清除浮动

<!-- Usage as a class -->
<div class="clearfix">...</div>

显示与隐藏

<div class="show">...</div>
<div class="hidden">...</div>

posted on 2017-11-20 16:04 WorthWaitingFor 阅读(290) 评论(0) 编辑收藏举报

刷新页面返回顶部

Worth Waiting For