Bootstrap （版本 v3.3.7）     官网教程： https://v3.bootcss.com/css/

row——行　　　　　　row——列

push——推　　　　　  pull——拉

col-md-offset-3　　在左边偏移3格

col-md-push-5　　 向右推5格

col-md-pull-2　　   向左拉2格

结构
<div class="container">

    <div class="row">

      　<div class="col-md-4">col-md-4</div>

    　　<div class="col-md-4">col-md-4</div>

        <div class="col-md-4">col-md-4</div>

    </div>

</div>    
<body class="table-responsive">

<table class="table table-striped table-bordered table-hover">

    <thead>

        <tr>

            <th>编号</th>

            <th>姓名</th>

            <th>性别</th>

            <th>年龄</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td>王小二</td>

            <td>男</td>

            <td>21</td>

        </tr>

        <tr class="info">

            <td>2</td>

            <td>张溜溜</td>

            <td>女</td>

            <td>23</td>

        </tr>

        <tr>

            <td>3</td>

            <td>程陈晨</td>

            <td>男</td>

            <td>25</td>

        </tr>

        <tr class="success">

            <td>4</td>

            <td>李云龙</td>

            <td>男</td>

            <td>53</td>

        </tr>

    </tbody>

</table>
</body>
{

position:absolute;

background-position: center center;

background-size:cover;

}

jQuery文件。务必在bootstrap.min.js 之前引入(因为是基于jquery)

站点图标             <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

快速生成图片      https://www.dummyimage.com/

bootstrap 实现两种方法：1）通过 js 实现        2）通过css3 媒体查询实现

图片：<img src="..." class="img-responsive"/>   图片响应式

用到栅格，应在父元素清除浮动（clearfix）

container 和 container-fluid 的区别

.container类用于固定宽度并支持响应式布局

.container-fluid类用于100%宽度，占据全部视口

 
https://www.cnblogs.com/zhangbao/p/6593121.html
一个典型导航条的结构如下：
nav .navbar.navbar-default

        .container

          .nav-header

             a.nav-brand
<div class="form-group">

    <label class="sr-only">用户名:</label>

    <input type="text" class="form-control" name="name" placeholder="输入用户名" />

</div>

<div class="checkbox"> 
　　<label><input type="checkbox" />记住密码</label> 
</div>

bootstrap简单使用的更多相关文章

  1. 基于Bootstrap简单实用的tags标签插件

    http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件

  2. Bootstrap简单入门

    Bootstrap简单入门 BootStrap基本模板 <!DOCTYPE html> <html> <head> <meta charset="U ...

  3. Bootstrap简单Demo（2015年05月-18日）

    Bootstrap的简单使用 1.Bootstrap是什么? 这是Bootstrap官网上对它的描述:Bootstrap是最受欢迎的HTML.CSS和JS框架,用于开发响应式布局.移动设备优先的WEB ...

  4. bootstrap简单图文环绕效果

    一．      下载bootstrap-3.3.7 二．      在html页面引入css,js; eg: <link src="bootstrap-3.3.7-dist/css/b ...

  5. Bootstrap简单HelloWorld入门教程

    这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点.看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面,了解栅格系统,并且能够使用boots ...

  6. mvc area区域和异步表单，bootstrap简单实例

    码农最怕眼高手低 今天来练习mvc Area技术和bootstrap以及异步表单的C#代码实现. 1.area区域架构对于建立复杂业务逻辑很有帮助,由  AreaRegistration.Regist ...

  7. 【Bootstrap简单用法】

    一.下载及使用 参考网站:http://www.bootcss.com/ 1.使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议) <!-- 最新版本的 ...

  8. bootstrap 简单练习（后续把其它页面也进行练习）

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. bootstrap简单使用实例

    表格实例,包含bootstrap.css 和 2.1.1jquery <!DOCTYPE html> <html> <head> <meta charset= ...

随机推荐

  1. cURL模拟POST提交数据

    首先,是这个代码: <?php //curl模拟post提交数据$url = "http://127.0.0.1/immoc/output.php";$post_data = ...

  2. MATLAB简易画图

    给定一组特殊点,连线作图 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 以成绩隶属函数为例: score.m cj_x1=[ 0.1]; cj_y1= ...

  3. DBUtils温习2

    上篇简单回顾了下DBUtils的简介和其常用的类,这篇博客结合C3P0连接池,做一个简单的增删改查操作 1.创建web项目,导入jar包 2.编写c3p0-config.xml和引入工具类 <? ...

  4. ueditor百度编辑器中，多图上传后，图片顺序乱掉的处理方法

    上传后,图片的顺序和预期的不一致,需要修改ueditor的源码. 一.找到editor/dialogs/attachment/attachment.js文件 1.将_this.fileList.pus ...

  5. Java面试知识点之线程篇（一）

    前言:在Java面试中,一定会遇到线程相关问题,因此笔者在这里总结Java中有关线程方面知识点,多数从网上得来(文中会贴出主要参考链接),有些也是笔者在面试中所遇到的问题,如有错误,请不吝指正.主要参 ...

  6. 设计模式のInterpreter Patern（解释器模式）----行为模式

    一.问题产生背景 有一句话“小明和小龙是好朋友”,我想分析其中谁是人,我想分析他们的关系等多种需求,那么我们应该如何处理,如果为每一个关系都进行判断?显然不合适,我们可以将二者的关系进行抽象处理,然后 ...

  7. 十大PHP程序员必备工具

    十大PHP程序员必备工具 1.Notepad++ 总结来说就是小而精,7.4版本的软件包只有2.9M,比一般的IDE小数十倍,但是Notepad++的功能确是很全面的,代码高亮,语法折叠,宏功能,内置 ...

  8. git 冲突解决的方法

    版权声明:本文为博主原创文章,未经博主同意不得转载. 新博客地址:www.atomicdevelop.com https://blog.csdn.net/believer123/article/det ...

  9. linux命令中的“<”和“|”是什么意思？

    ”<” 表示的是输入重定向的意思,就是把<后面跟的文件取代键盘作为新的输入设备.”| ”则表示一个管道的意思,可以理解为东西从管道的一边流向另外一边.   cat file.json | ...

  10. 基于Spring Boot和Shiro的后台管理系统FEBS

    FEBS是一个简单高效的后台权限管理系统.项目基础框架采用全新的Java Web开发框架 —— Spring Boot 2.0.3,消除了繁杂的XML配置,使得二次开发更为简单:数据访问层采用Myba ...