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. linux 上安装 tomcat

    准备条件:安装java 一.tomcat 的安装 #新建文件夹 mkdir -p /data/tomcat #下载 tomcat8 服务器 wget http://mirrors.tuna.tsing ...

  2. python学习笔记（26）-request模块

    python学习笔记 #requests import requests #from class_005.http_resuest import HttpRequest login_url = &qu ...

  3. Complier

    Complier [2019福建省赛] 模拟题应该有信心写,多出一些样例 当/* 与// 在一起的时候总会出错,一旦出现了这些有效的 应该把它删掉不对后面产生影响 #include<bits/s ...

  4. 构建Oracle的Docker镜像

    说明:本次构建环境,Centos7.7,Oracle12.2.0.1,Docker19 注意:已安装好docker的,请检查docker版本,1.13以下版本要升级: # df -h 命令检查根目录的 ...

  5. [HNOI2003]操作系统 优先队列用法

    题:https://www.cometoj.com/problem/1046 #include<bits/stdc++.h> using namespace std; typedef lo ...

  6. 使用idea创建spring mvc项目图文教程

    使用idea创建spring mvc项目图文教程 前言: 使用惯了eclipse的朋友,如果刚换成了idea或许有些不习惯.但是使用idea之后,就会love上idea了.本文将通过图文讲解怎么通过i ...

  7. 金山wps的面试经历

    故事从两个月前开始说起吧. 前段时间突然想跳槽,原因也没啥,就是想折腾下,看看外面的世界?有一部分原因是想离家近一些稳定下来,博主上份工作坐标厦门,风景好的简直随便拍照就是大片. 不废话了,机缘巧合, ...

  8. [LC] 47. Permutations II

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  9. Logarithmic transformation|Data transfer|MASS|Box-Cox

    数据转换(Data transfer) 方差分析的前提是方差齐性,可以使用transfer改变方差使得方差变齐.不正态和outlier. Logarithmic transformation使方差聚合 ...

  10. vue使用日记

    使用vue-cli生成单页应用框架, npm run serve之后即可开始修改src目录下面的js css文件(index.html可以保持不动), 自动热部署 , 前端框架就已经搭起来了. web ...