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. Android之布局RelativeLayout

    线性布局的weight属性在等比例分配时比较方便,但是对复杂的界面,嵌套多层LinearLayout布局会导致渲染变慢,占用更多系统资源:而使用RelativeLayout的话,可能仅仅需要一层就可以 ...

  2. java.lang.IllegalArgumentException: Cannot format given Object as a Date

    在进行日期转换的时候遇到了这个问题, 非常的恼火 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss" ...

  3. 没有更好的，五种操作系统助力研发，IMX6开发板做得到

    核心板参数 尺寸 51mm*61mm 四核商业级-2G NXP 四核 i.MX6Q,主频 1 GHz 内存:2GB DDR3:存储:16GB EMMC:SATA接口:支持 双核商业级-1G NXP 双 ...

  4. 4418开发板基于Linux-c测试程序的编译和运行

    基于iTOP4418开发板的Linux-c的测试程序iTOP-4418 开发板可以运行的文件系统很多,在具体的文件系统上实现特定功能前,可以使用 Linux-c 程序来测试硬件以及驱动.而且这些程序很 ...

  5. [LC] 151. Reverse Words in a String

    Given an input string, reverse the string word by word. Example 1: Input: "the sky is blue" ...

  6. 49),PHP, 重写

  7. python语法基础-网络编程-TCP协议和UDP协议

    ###############    网络编程    ############## """ 网络编程 学习了Python基础之后,包括函数,面向对象等,你就可以开发了,你 ...

  8. 关于Apache Commons-IO的使用

    commons-io是一款处理io流的工具,封装了很多处理io流和文件的方法,可以大大简化我们处理io流和操作文件的代码.从common-io的官方使用文档可以看出,它主要分为工具类.尾端类.行迭代器 ...

  9. 吴裕雄--天生自然 JAVASCRIPT开发学习：对象 实例（2）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. VisualStudio使用HALCIN_NET控件

    遵循以下步骤在一个应用中添加Halcon/.Net: 一. 定义工具箱 Halcon/.net 不仅提供了一个类库,而且提供了一个控件:HWindowControl,它包含一个显示图像处理结果的Hal ...