bootstrap简介

http://v3.bootcss.com/

Bootstrap优点：

下载：

Bootstrap引入

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

<link href="dist/css/bootstrap.min.css" rel="stylesheet">

<script type="application/javascript" src="dist/jquery-3.1.1.js"></script>

<script type="application/javascript" src="dist/js/bootstrap.min.js">

CSS栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <title>Bootstrap-demo</title>

    <style>

        .row div{

            background-color: #2e6da4;

            border: 1px solid #f5e79e;

            color:#fff0f0;

        }

        .row{

            margin-top: 20px;

            border: 1px solid red;

        }

    </style>

</head>

<body>

<!---------------------------- 栅格系统的结构------------>

<h4 style="text-align: center">栅格系统的结构</h4>

<div class="container">

    <!--在小型pc正常显示-->

    <div class="row">

          <div class="col-md-2">md-2</div>

          <div class="col-md-4">md-4</div>

          <div class="col-md-6">md-6</div>

    </div>

    <!--在小型pc66分,sm上48分-->

    <div class="row">

      <div class="col-md-6 col-sm-4">md6-sm4</div>

      <div class="col-md-6 col-sm-8">md6-sm8</div>

    </div>

    <div class="row">

      <div class="col-sm-2">md-2</div>

      <div class="col-sm-4">md-4</div>

      <div class="col-sm-6">md-6</div>

    </div>

<!-----------------------------栅格系统的使用------------>

<h4 style="text-align: center">栅格系统的使用</h4>

 <h5> 1 列偏移offset</h5>

    <div class="row">

           <div class="col-md-2">col-md-2</div>

           <div class="col-md-4 col-md-offset-4">col-md-offset-4</div>

    </div>

<h5>  2 列嵌套    </h5>

            <div class="row">

                  <div class="col-md-9">

                      111

                      <div class="row">

                          <div class="col-md-3">222</div>

                          <div class="col-md-9">222</div>

                      </div>

                  </div>

            </div>

<h5>4 列排序</h5>

    <div class="row">

               <div class="col-md-9 col-md-push-3">col-md-9</div>

               <div class="col-md-3 col-md-pull-9">col-md-3</div>

    </div>

</div>

</body>

</html>

四表格

表格样式

<div class="container">

  <table class="table table-striped">

      <!--关于表格存储内容的描述或总结。-->

      <caption>条纹表格布局</caption>

      <thead>

        <tr>

          <th>姓名</th>

          <th>年龄</th>

          <th>salary</th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <td>Bob</td>

          <td>23</td>

          <td>3000</td>

        </tr>

        <tr class="danger">

          <td>steven</td>

          <td>34</td>

          <td>5000</td>

        </tr>

        <tr class="success">

          <td>alvin</td>

          <td>33</td>

          <td>7000</td>

        </tr>

        <tr class="warning">

          <td>alvin</td>

          <td>33</td>

          <td>7000</td>

        </tr>

      </tbody>

    </table>

</div>

响应式表格

通过把任意的 .table 包在 .table-responsive class 内可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，看不到任何的差别。

表单

Bootstrap 提供了下列类型的表单布局：

垂直表单（默认）
内联表单
水平表单

垂直表单

创建基本表单的步骤：

向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

<form role="form">

  <div class="form-group">

    <label for="username">用户名</label>

    <input type="text" class="form-control" id="username" placeholder="请输入用户名">

  </div>

  <div class="form-group">

    <label for="password">密码</label>

    <input type="password" class="form-control" id="password" placeholder="请输入密码">

  </div>

  <div class="checkbox">

    <label>

      <input type="checkbox">记住密码

    </label>

  </div>

  <button type="submit" class="btn">提交</button>

</form>

<div class="row">

    <div class="col-md-3 col-md-offset-5">

        <form role="form">

          <div class="form-group">

            <label for="username">用户名</label>

            <input type="text" class="form-control" id="username" placeholder="请输入用户名">

          </div>

          <div class="form-group">

            <label for="password">密码</label>

            <input type="password" class="form-control" id="password" placeholder="请输入密码">

          </div>

          <div class="checkbox">

            <label>

              <input type="checkbox">记住密码

            </label>

          </div>

          <button type="submit" class="btn">提交</button>

        </form>

    </div>

</div>

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。

默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
使用 class .sr-only，您可以隐藏内联表单的标签。

水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

向父 <form> 元素添加 class .form-horizontal。
把标签和控件放在一个带有 class .form-group 的 <div> 中。
向标签添加 class .control-label。

<div class="container">

    <form class="form-horizontal" role="form">

      <div class="form-group">

        <label for="username" class="col-sm-2 control-label">用户名</label>

        <div class="col-sm-10">

          <input type="text" class="form-control" id="username" placeholder="请输入用户名">

        </div>

      </div>

      <div class="form-group">

        <label for="pwd" class="col-sm-2 control-label">密码</label>

        <div class="col-sm-10">

          <input type="text" class="form-control" id="pwd" placeholder="请输入用户名">

        </div>

      </div>

      <div class="form-group">

        <div class="col-sm-offset-2 col-sm-10">

          <div class="checkbox">

            <label>

              <input type="checkbox">记住密码

            </label>

          </div>

        </div>

      </div>

      <div class="form-group">

        <div class="col-sm-offset-2 col-sm-10">

          <button type="submit" class="btn">登录</button>

        </div>

      </div>

    </form>

</div>

表单控件状态

输入框焦点：当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

禁用的输入框 input：如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

禁用的字段集 fieldset：对<添加 disabled 属性来禁用内的所有控件。

验证状态：Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态

<div class="container">

      <form class="form-horizontal" role="form">

      <div class="form-group">

        <label class="col-sm-2 control-label">normal</label>

        <div class="col-sm-10">

          <input class="form-control" type="text" placeholder="该输入框可以获得焦点...">

        </div>

      </div>

      <div class="form-group">

        <label for="inputPassword" class="col-sm-2 control-label">禁用</label>

        <div class="col-sm-10">

          <input class="form-control" id="inputPassword" 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>

      <div class="form-group has-success">

        <label class="col-sm-2 control-label" for="inputSuccess">输入成功</label>

        <div class="col-sm-10">

          <input type="text" class="form-control" id="inputSuccess">

        </div>

      </div>

      <div class="form-group has-warning">

        <label class="col-sm-2 control-label" for="inputWarning">输入警告</label>

        <div class="col-sm-10">

          <input type="text" class="form-control" id="inputWarning">

        </div>

      </div>

      <div class="form-group has-error">

        <label class="col-sm-2 control-label" for="inputError">输入错误</label>

        <div class="col-sm-10">

          <input type="text" class="form-control" id="inputError">

        </div>

      </div>

      </form>

</div>

表单控件大小

您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度

<div class="container">

  <form role="form">

  <div class="form-group">

    <!--have a try: input-sm-->

    <input class="form-control input-lg" type="text" placeholder=".input-lg">

  </div>

  <div class="form-group">

    <!--have a try: input-sm-->

    <select class="form-control input-lg">

      <option value="">默认选择</option>

    </select>

  </div>

  <div class="row">

    <div class="col-lg-6">

      <input type="text" class="form-control">

    </div>

    <div class="col-lg-6">

      <input type="text" class="form-control">

    </div>

  </div>

  </form>

</div>

表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 <input> 后使用 .help-block。

<div class="container">

<form role="form">

  <span>帮助文本实例</span>

  <input class="form-control" type="text" placeholder="">

  <span class="help-block">帮助文本实例帮助文本实例帮助文本实例帮助文本实例帮助文本实例

  帮助文本实例帮助文本实例帮助文本实例帮助文本实例帮助文本实例帮助文本实例帮助文本实例

  帮助文本实例帮助文本实例帮助文本实例</span>

</form>

</div>

按钮

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式

<div class="container">

<!-- 标准的按钮 -->

<button type="button" class="btn btn-default">默认按钮</button>

<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->

<button type="button" class="btn btn-primary">原始按钮</button>

<!-- 表示一个成功的或积极的动作 -->

<button type="button" class="btn btn-success">成功按钮</button>

<!-- 信息警告消息的上下文按钮 -->

<button type="button" class="btn btn-info">信息按钮</button>

<!-- 表示应谨慎采取的动作 -->

<button type="button" class="btn btn-warning">警告按钮</button>

<!-- 表示一个危险的或潜在的负面动作 -->

<button type="button" class="btn btn-danger">危险按钮</button>

<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->

<button type="button" class="btn btn-link">链接按钮</button>

<hr>

<button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>

<button type="button" class="btn btn-default btn-sm">小的按钮</button>

<hr>

<p>

  <button type="button" class="btn btn-default btn-lg ">默认按钮</button>

  <button type="button" class="btn btn-default btn-lg active">激活按钮</button>

</p>

<p>

  <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>

  <button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>

</p>

<hr>

<p>

  <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>

  <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>

</p>

</div>

七图片

Bootstrap 提供了三个可对图片应用简单样式的 class：

.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

<img src="mienv.png" class="img-rounded">

另外，通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上

<img src="meinv.jpg" class="img-responsive">

前端基础之Bootstrap介绍的更多相关文章

前端基础之 Bootstrap框架
浏览目录 Bootstrap介绍为什么要使用Bootstrap? Bootstrap环境搭建布局容器栅格系统 Bootstrap全局样式一.Bootstrap介绍 Bootstrap是Twit ...
前端基础之Bootstrap
1. 页面加载完之后才执行的JS代码 1. DOM方式 window.onload = function(){} 2. jQuery方式 ...
前端基础：JavaScript介绍
JavaScript介绍一.JavaScript简介 1.在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现二层,因为Netscape与Sun合作,N ...
前端基础之css介绍
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
前端基础 & Bootstrap框架
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...
前端基础(六)：Bootstrap框架
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...
第 1 章 Bootstrap 介绍
学习要点:1.Bootstrap 概述2.Bootstrap 特点3.Bootstrap 结构4.创建第一个页面5.学习的各项准备主讲教师:李炎恢本节课我们主要了解一下 Boostrap 历史.特 ...
第二百三十一节，Bootstrap 介绍
Bootstrap 介绍学习要点: 1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备本节课我们主要了解一下 Boos ...
前端学习之Bootstrap学习
一,Bootstrap简介在前端世界,有个叫Bootstrap的家伙,,是twitter 开源出来的一套前端框架,利用Ta可以快速开发网站界面,它的特点就是比自己从头写简单,直观,方便,快捷,省劲. ...

随机推荐

[: ==: unary operator expected 解决方法
之前在写脚本时遇到了这样的错误 “[: ==: unary operator expected” 这是由于做判断的变量值为空导致的. 谷歌出解决方案: 在变量之后加任意字符.例如,要判断变量un是否为 ...
C语言结构体（嵌套结构体--结构体数组）
//结构体--嵌套结构体和结构体数组 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> ...
Python使用MySQL数据库的
然而,2016年开始,我从Python2切换到了Python3,Python2已经基本不再使用,MySQLdb驱动从2014年1月停止了维护.所以,打算重新再来写这篇博客. Python2 ---&g ...
&&和&（||和|）区别
上代码,引出问题 public class Test { private static int j = 0; private static Boolean methodB(int k) { j += ...
cocos2d-x学习日志(18) --程序是怎样開始执行与结束?
问题的由来怎么样使用 Cocos2d-x 高速开发游戏.方法非常easy,你能够看看其自带的例程,或者从网上搜索教程,执行起第一个HelloWorld,然后在 HelloWorld 里面写相关逻辑代 ...
python学习【第六篇】python迭代器与生成器
一.什么是迭代器迭代器协议:对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么就引起一个StopIteration异常,以终止迭代(只能往后走不能往前退) 可迭代对象:实现了迭代器 ...
poj3159
Candies Time Limit: 1500MS Memory Limit: 131072K Total Submissions: 28133 Accepted: 7766 Descrip ...
jQuery插件——1.编写规则
jQuery插件编写规则如下: 1.命名规则:jquery.[插件名称].js 2.所有对象方法都应当附加到jQuery.fn对象上:所有的全局方法都应当附加到jQuery对象上. 3.在插件内部,t ...
在使用NavigationController情况下的布局的Y轴的起始位置
在有的时候,当一个ViewController被push进一个NavigationController的时候,view上会有一个高度为64的NavigationBar(除非主动隐藏了Navigatio ...
【python】-- Django 分页、cookie、Session、CSRF
Django 分页 .cookie.Session.CSRF 一.分页分页功能在每个网站都是必要的,下面主要介绍两种分页方式: 1.Django内置分页 from django.shortcuts ...

前端基础之Bootstrap介绍