bootstrap前端框架

1.概念：一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。

	*好处：

		1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。

		2. 响应式布局。

			* 同一套页面可以兼容不同分辨率的设备。

2.快速入门：

	1. 下载bootstrap

	2. 在项目中将这三个文件夹复制

	3. 创建html文件，引入必要的资源文件
框架示例
<!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 HelloWorld</title>

	    <!-- Bootstrap -->

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

	    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

	    <script src="js/jquery-3.2.1.min.js"></script>

	    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

	    <script src="js/bootstrap.min.js"></script>

	</head>

	<body>

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

	</body>

	</html>

响应式布局

* 同一套页面可以兼容不同分辨率的设备。

* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

* 步骤：

	1. 定义容器。相当于之前的table

		* 容器分类：

			1. container：两边留白

			2. container-fluid：每一种设备都是100%宽度

	2. 定义行。相当于之前的tr   样式：row

	3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目

		* 设备代号：

			1. xs：超小屏幕 手机 (<768px)：col-xs-12

			2. sm：小屏幕 平板 (≥768px)

			3. md：中等屏幕 桌面显示器 (≥992px)

			4. lg：大屏幕 大桌面显示器 (≥1200px)

	代码示例

	<div class="container">

    <div class="row">

        <!--在打显示器上一行12个格子

            在pad上一行6个格子-->

       <!-- <div class="col-lg-1 col-sm-2 inner">栅格</div>

        <div class="col-lg-1 col-sm-2 inner">栅格</div>

        <div class="col-lg-1 col-sm-2 inner">栅格</div>

        <div class="col-lg-1 col-sm-2 inner">栅格</div>

        <div class="col-lg-1 col-sm-2 inner">栅格</div>

        <div class="col-lg-1 col-sm-2 inner">栅格</div>

        <div class="col-lg-1 col-sm-2 inner">栅格</div>

        <div class="col-lg-1 col-sm-2 inner">栅格</div>

        <div class="col-lg-1 col-sm-2 inner">栅格</div>

        <div class="col-lg-1 col-sm-2 inner">栅格</div>

        <div class="col-lg-1 col-sm-2 inner">栅格</div>

        <div class="col-lg-1 col-sm-2 inner">栅格</div>-->

        <div class="col-md-4  inner">栅格</div>

        <div class="col-md-4  inner">栅格</div>

        <div class="col-md-4  inner">栅格</div>

    </div>

</div>

	* 注意：

		1. 一行中如果格子数目超过12，则超出部分自动换行。

		2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。

		3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

CSS样式和JS插件

详情可以参考bootstrap官网：

css样式表

JavaScript插件表

1. 全局CSS样式：

	* 按钮：class="btn btn-default"

	* 图片：

		*  class="img-responsive"：图片在任意尺寸都占100%

		*  图片形状

			*  <img src="..." alt="..." class="img-rounded">：方形

			*  <img src="..." alt="..." class="img-circle"> ： 圆形

			*  <img src="..." alt="..." class="img-thumbnail"> ：相框

	代码示例：

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

	* 表格

		* table

		* table-bordered

		* table-hover

代码示例：

<body>

<TABLE class="table table-hover">

    <tr>

        <th>编号 </th>

        <th>姓名</th>

        <th>年龄</th>

    </tr>

    <tr>

        <td>001</td>

        <td>张三</td>

        <td>23</td>

    </tr>

    <tr>

        <td>002</td>

        <td>张三</td>

        <td>23</td>

    </tr>

    <tr>

        <td>003</td>

        <td>张三</td>

        <td>23</td>

    </tr>

</TABLE>

<hr><hr><hr>

<form class="form-horizontal">

    <div class="form-group " >

        <label for="exampleInputEmail1" class="col-sm-2 control-label">Email address</label>

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

        <input type="email" class="form-control" id="exampleInputEmail1" 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>

    <div class="form-group">

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

            <div class="checkbox">

                <label>

                    <input type="checkbox"> Remember me

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

</body>

	* 表单

		* 给表单项添加：class="form-control"

2. 组件：

	* 导航条

代码示例：

<nav class="navbar navbar-inverse">

<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="#">首页</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="#">精品分类 <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>

	* 分页条

3. 插件：

	* 轮播图

所有代码和案例已上传至GitHub，请点击：

"bootstrap_codes"

bootstrap简介与入门的更多相关文章

  1. Bootstrap框架菜鸟入门教程

    Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简 ...

  2. Bootstrap笔记--快速入门

    首先是Bootstrap的简介: 业余了解:下面这个网址可以查询IP地址的地理位置 下面学习:(具体可以参考Bootstrap中文网) 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流 ...

  3. JS面向对象（1） -- 简介，入门，系统常用类，自定义类，constructor，typeof，instanceof，对象在内存中的表现形式

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  4. python3-day1-python简介及入门

    python简介及入门 python简介 Python的创始人为Guido van Rossum.1989年圣诞节期间,在阿姆斯特丹,Guido为了打发圣诞节的无趣,决心开发一个新的脚本解释程序,做为 ...

  5. Robot Framework-工具简介及入门使用

    Robot Framework-Mac版本安装 Robot Framework-Windows版本安装 Robot Framework-工具简介及入门使用 Robot Framework-Databa ...

  6. BootStrap简介及应用要点

    BootStrap简介 BootStrap是基于HTML.CSS和JavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架,他是后端程序员的福音,使他们只需要专注业务逻辑 ...

  7. Linux内核学习笔记-1.简介和入门

    原创文章,转载请注明:Linux内核学习笔记-1.简介和入门 By Lucio.Yang 部分内容来自:Linux Kernel Development(Third Edition),Robert L ...

  8. Akka 简介与入门

    Akka 简介与入门 http://www.thinksaas.cn/group/topic/344095/ 参考官网  http://akka.io/ 开源代码  https://github.co ...

  9. 第一章 Bootstrap简介

    一.Bootstrap简介 Bootstrap是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jaco ...

随机推荐

  1. 查询Redis缓存

    package me.zhengjie.monitor.rest; import me.zhengjie.common.aop.log.Log; import me.zhengjie.monitor. ...

  2. 感叹号在Linux bash中使用技巧

    1. 重复执行上一条指令  !! [root@iZ23t6nzr7dZ python]# ls /usr/local/ aegis bin etc games include lib lib64 li ...

  3. Codeforces Round#615 Div.3 解题报告

    前置扯淡 真是神了,我半个小时切前三题(虽然还是很菜) 然后就开始看\(D\),不会: 接着看\(E\),\(dp\)看了半天,交了三次还不行 然后看\(F\):一眼\(LCA\)瞎搞,然后\(15m ...

  4. iOS运营级B2B服务平台App、自定义图标库、个人中心页面、识别身份证Demo、瀑布流等源码

    iOS精选源码 简单的个人中心页面-自定义导航栏并予以渐变动画 一个近乎完整的可识别中国身份证信息的Demo 可自动快速... iOS可自定义图表库 - PNChart 开源一款曾是运营级的B2B服务 ...

  5. android流式布局、待办事项应用、贝塞尔曲线、MVP+Rxjava+Retrofit、艺术图片应用等源码

    Android精选源码 android模仿淘宝首页效果源码 一款艺术图片应用,采用T-MVVM打造 Android MVP + RxJava + Retrofit项目 android流式布局实现热门标 ...

  6. android仿今日头条App、多种漂亮加载效果、选择器汇总、记事本App、Kotlin开发等源码

    Android精选源码 android漂亮的加载效果 android各种 选择器 汇总源码 Android仿bilibili搜索框效果 Android记事本app.分类,涂鸦.添加图片或者其他附件 仿 ...

  7. [LC] 78. Subsets

    Given a set of distinct integers, nums, return all possible subsets (the power set). Note: The solut ...

  8. 收集到的技术相关网址——delphi

    1.DLL封装登录框架实现代码复用 https://www.cnblogs.com/wenwencao/articles/1333659.html

  9. [LC] 242. Valid Anagram

    Given two strings s and t , write a function to determine if t is an anagram of s. Example 1: Input: ...

  10. java中Redis5大基本类型的用法

    存储格式 基本用法 通过Jedis(封装了redis的Java客户端)对redis进行操作. Jedis工具类 public class JedisPoolUtil { private static ...