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系统国内镜像站点

    一,更换说明 第一步 备份 如centos, mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup ...

  2. 使用selenium模拟浏览器抓取淘宝信息

    通过Selenium模拟浏览器抓取淘宝商品美食信息,并存储到MongoDB数据库中. from selenium import webdriver from selenium.common.excep ...

  3. SAP PM：设备主数据常用BAPI

    如下参考: STATUS_CHANGE_EXTERN BAPI_EQMT_MODIFY BAPI_EQUI_CHANGE PM BAPI: Change Equipment BAPI_EQUI_CRE ...

  4. SAP PM：通过接口获取设备资产基本信息

    在SAP工厂维护模块中,给设备贴二维码标签是现在越来越流行的做法.因此通过扫描二维码获取设备资产信息是个非常基本的需求. 以下实例简单实现了,给SAP RFC传入设备编码获取设备资产基本信息的需求. ...

  5. day47-线程-锁和死锁

    #1.锁:防止多个线程同时读写某一块内存区域. from threading import Thread from threading import Lock def func(): global n ...

  6. linux文件系统与链接

    Linux的文件属性图1 图1   linux的文件属性 ls -lhi -l 长格式 -h 人性化 -i inodo -d 看目录自己的信息 inode 源自于文件系统 分区 平面设计图 格式化 施 ...

  7. 比率(ratio)|帕雷托图|雷达图|轮廓图|条形图|茎叶图|直方图|线图|折线图|间隔数据|比例数据|标准分数|标准差系数|离散系数|平均差|异众比率|四分位差|切比雪夫|右偏分布|

    比率是什么? 比率(ratio) :不同类别数值的比值 在中文里,比率这个词被用来代表两个数量的比值,这包括了两个相似却在用法上有所区分的概念:一个是比的值:另一是变化率,是一个数量相对于另一数量的变 ...

  8. LTE-U/LAA

    将LTE扩展至非授权频谱,得益于一个稳健的无线电通信线路,具有更好协调性的同步节点,以及以授权频谱为基点的载波聚合,LTE-U/LAA能提供比载波Wi-Fi更佳的网络性能和更强的用户体验,为移动运营商 ...

  9. 陈天奇XGBoost文章解读（未完成）

    这个是我下载的原文在看,然后结合一些网上的资料学习,先贴一个网上的资料. 终于有人说清楚了XGBoost算法 XGBoost阅读之Weighted quantile sketch XGBoost论文翻 ...

  10. CF-552E-Two Teams

    pro:给出n, k和长度为n的数组a, 两个人轮流取数1先取,设a[i]是当前数组中最大值,则取走a[i - k]到a[i + k]这段数,然后把a[i + k + 1]和后面的补到 a[i - k ...