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. 阿里云zabbix的python脚本

    由于阿里云只能用465端口.所以这个zabbix的脚本修改成了465端口的python脚本. 修改于https://www.jianshu.com/p/9d6941dabb47 #!/usr/bin/ ...

  2. Hardy-Weinberg laws

    I.3 Diploids with two alleles: Hardy-Weinberg laws 假设子代是Aa,AA,aa的概率分别是PAa,PAA,Paa,A的基因概率是P1,a的基因概率是P ...

  3. binary-heap（二叉堆）原理及C++代码实现

    二叉堆可以看做一个近似的完全二叉树,所以一般用数组来组织. 二叉堆可以分为两种形式:最大堆和最小堆.最大堆顾名思义,它的每个结点的值不能超过其父结点的值,因此堆中最大元素存放在根结点中.最小堆的组织方 ...

  4. 场景实践篇二：Nginx作为缓存

    cd /etc/nginx/conf.d/ vim cache_test.conf

  5. spring cloud解决eureka的client注册时默认使用hostname而不是ip

    eureka的client注册到server时默认是使用hostname而不是ip.这样的话使用feign client通过eureka进行服务间相互调用时也会使用hostname进行调用,从而调用失 ...

  6. python学习笔记（23）-异常处理

    #异常处理与调试 #异常:在运行代码过程中遇到的任何错误,带有error字样的都是异常 #异常处理,对代码中所有可能出现的异常进行的处理 #1.处理某个错误 2,处理某个类型的错误 3 有错就抓 一. ...

  7. 73）PHP，session基本操作

    (1)先开启: Session_start(); 也可以通过php.ini配置文件中,自动开启sesssion机制:    Session.auto_start; (2)利用$_SESSION来操作数 ...

  8. 学习python-20191108（1）Mysql、Flask

    一.使用pymysql模块操作MYSQL 导入pymysql模块: pip install pymysql 1.增删改 import pymysql # 定义数据库连接信息 config = {    ...

  9. Mysql分区，分库和分表

    作者说的非常清楚了,感谢.地址为:http://haitian299.github.io/2016/05/26/mysql-partitioning/. 本人项目实践,使用sharding-jdbc进 ...

  10. Sublime Text2 使用心得总结

    sublime text2是开发代码编辑的神器 ,编辑器界面优美,操作速度快速.而且Sublime Text2是一款跨平台的编辑器,再也不用为换平台而找不到合适的.熟悉的编辑器担忧了. Sublime ...