bootstrap 入门

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>bootstrap</title>

    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <script src="../scripts/jquery-1.12.2.min.js" type="text/javascript"></script>

    <script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

</head>

<body style="background-color: #ccc;">

<div class="container" style="background-color: #fff;">

    <div class="text-center">bootstrap移动设备优先 封装html css js</div>

    <ul class="list-inline">  <!--左浮动-->

        <li>html</li>

        <li>css</li>

    </ul>

    <hr/>

    <div class="table-responsive">

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

        <tr>

            <td>名字</td><td>年龄</td><td>学历</td><td>学历</td><td>学历</td><td>学历</td><td>学历</td><td>学历</td>

        </tr>

        <tr class="danger">

            <td>cat</td><td>12</td><td>大学本科</td><td>大学本科</td><td>大学本科</td><td>大学本科</td><td>大学本科</td><td>大学本科</td>

        </tr>

        <tr>

            <td>cat2</td><td>22</td><td>大专</td><td>大专</td><td>大专</td><td>大专</td><td>大专</td><td>大专</td>

        </tr>

    </table>

    </div>

    <form>

        <div class="form-group">

            <label for="exampleInputEmail1">Email address</label>

            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">

        </div>

    </form>

    <p>栅格</p>

    <div class="row">

        <div class="col-md-4">.container 固定宽度且响应式

            .container-fluid 100%宽度

            .h1 ～　.h6

            .text-left 文本左对齐

            .list-unstyled 无符号

            .list-inline(行内块）

            .active

            .success 成功颜色

            .warning 警告颜色

            响应式表格

            meta http-equiv="X-UA-Compatible" content="IE=edge"</div>

        <div class="col-md-4 col-md-offset-4">.container 固定宽度且响应式

            .container-fluid 100%宽度

            .h1 ～　.h6

            .text-left 文本左对齐

            .list-unstyled 无符号

            .list-inline(行内块）

            <p>表格</p>

            .table .table-striped 表格隔行变色

            .table-bordered 带边框的表格

            .table-hover 鼠标悬停效果

        </div>

    </div>

    <hr/>

    <div class="row">

        <div class="col-md-4">.container 固定宽度且响应式

            .container-fluid 100%宽度

            .h1 ～　.h6

            .text-left 文本左对齐

            .list-unstyled 无符号

        </div>

        <div class="col-md-8">

            <div class="row">

                <div class="col-md-6" style="height: 100px; background-color: red;"></div>

                <div class="col-md-6" style="height:100px;background-color: green;"></div>

            </div>

            .container 固定宽度且响应式

            .container-fluid 100%宽度

            .h1 ～　.h6

            .text-left 文本左对齐

            .list-unstyled 无符号

        </div>

    </div>

    <hr/>

    <form class="form-horizontal">

        <div class="form-group">

            <label for="email" class="col-sm-2 control-label">Email address</label>

            <div class="col-sm-10">

                <input type="email" class="form-control" id="email" placeholder="Email">

            </div>

        </div>

        <div class="form-group">

            <label for="password" class="col-sm-2 control-label">password</label>

            <div class="col-sm-10">

                <input type="email" class="form-control" id="password" placeholder="password">

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">upload</label>

            <div class="col-sm-10">

                <input type="file">

                <p class="help-block">the pic is jpg/gif/png</p>

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">checkbox</label>

            <div class="col-sm-10">

                <label class="checkbox-inline"><input type="checkbox" > 1 </label>

                <label class="checkbox-inline"><input type="checkbox" > 2 </label>

                <label class="checkbox-inline"><input type="checkbox" > 3 </label>

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">intro</label>

            <div class="col-sm-10">

                <textarea rows="5" placeholder="please input your mes"></textarea>

            </div>

        </div>

        <div class="col-sm-10 col-sm-offset-2">

            <button class="btn btn-danger btn-lg" type="button">submit</button>

        </div>

    </form>

    <hr/>

    <h2 class="page-header">图片</h2>

    <div class="">

        <img class="img-responsive img-circle center-block" src="../img/1.png" width="500"/>

        <p>meta name="viewport" content="width=device-width,initial-scale=1"

            IE兼容模式

            meta http-equiv="X-UA-Compatible" content="IE=edge"</p>

    </div>

    <hr/>

    <p class="lead mark">hello</p>

    <abbr class="initialism" title="search engine ">seo</abbr>

    <blockquote class="blockquote-reverse">

        <h1>西游记</h1>

        <footer>吴承恩</footer>

    </blockquote>

    <dl class="dl-horizontal">

        <dt>标题1</dt>

        <dd>1</dd>

        <dt>标题2</dt>

        <dd>2</dd>

    </dl>

    <hr/>

    <!--关闭按钮-->

    <p style="min-height: 150px; background-color: #36a701">

        <button type="button" class="close" id="close" >&times;</button>

    </p>

    <script>

        //    关闭

        $("#close").click(function () {

            $("#close").parent().hide();

        });

    </script>

    <!--大屏幕显示大按钮，小屏幕显示小按钮-->

    <button type="button" class="btn btn-primary visible-md-block btn-lg">button</button>

    <button type="button" class="btn btn-success visible-sm-block btn-md">button</button>

    超小屏幕隐藏 my title

    <h1 class="hidden-xs">my title</h1>

</div>

<hr/>

.container 固定宽度且响应式

.container-fluid 100%宽度

.h1 ～　.h6

.text-left 文本左对齐

.list-unstyled 无符号

.list-inline(行内块）

<p>表格</p>

.table .table-striped 表格隔行变色

.table-bordered 带边框的表格

.table-hover 鼠标悬停效果

.table-condensed 紧凑的表格

行或单元格背景色 状态类

.active

.success 成功颜色

.warning 警告颜色

响应式表格

.table 放在 .table-responsive元素内，可创建响应式表格

当屏幕宽小于768px 表格会出现滚动条

<p>表单</p>

.form-group 表单分组

.form-control 表单样式 input

.form-inline  用于form元素，使元素一行排列

.form-horizontal 水平排列的表单 详情见  http://v3.bootcss.com/css

.sr-only 隐藏

<p>响应式布局</p>

meta name="viewport" content="width=device-width,initial-scale=1"

IE兼容模式

meta http-equiv="X-UA-Compatible" content="IE=edge"

栅格

列偏移

.col-md-offset-2  向右偏移2个列

.lead 加深

.mark 高亮 百度快照  想改变默认样式 ，直接样式表重写  .mark{}

h5标准：

br readonly

html lang="zh-CN"

引入 css js 不需要 type 属性 使用根路径

属性顺序:重要的先写 <div class="" id="" name="" src="" alt="" aria-label="" role=""></div>

少用标签 避免js生成标签

不用 submit  <button id="123" type="button">button</button>

样式表 body {} 右花括号占一行 每条样式都换行   heaer, footer {}  opacity: .1;  表示 0.1   color:#abc; 小写，简写

class 命名方式：text-center 父级元素加样式  .h1-div-a   <h1><div><a>aa</a></div></h1>

简单的写一行就行  .div {color:red;}

</body>

</html>

bootstrap 入门的更多相关文章

  1. 01.Bootstrap入门

    Bootstrap介绍: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...

  2. Bootstrap入门（二）栅格

    Bootstrap入门(二)栅格 Bootstrap入门(二)栅格 全局CSS样式--栅格 先引入本地的CSS文件(根据自己的文件夹,有不同的引入地址,我是放在一个新建的名为css的文件夹中) con ...

  3. BootStrap入门教程 (一)

    BootStrap入门教程 (一)   2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...

  4. Bootstrap入门（三十）JS插件7：警告框

    Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...

  5. Bootstrap入门（二十九）JS插件6：弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  6. Bootstrap入门（二十八）JS插件5：工具提醒

    Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文 ...

  7. Bootstrap入门（二十七）JS插件4：标签页

    Bootstrap入门(二十七)JS插件4:标签页 标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" re ...

  8. Bootstrap入门（二十五）JS插件2：过渡效果

    Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js  ...

  9. Bootstrap入门（二十四）data属性

    Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...

随机推荐

  1. backbone & django csrf_token的问题

    由于这个加入了token的验证,因此在backbone调用Model/Collection的save时会失败,错误403.(这里不讨论劫持重发的问题) 解决方案是:修改xmlHttpRequest的h ...

  2. Scala教程

    Scala表示可扩展性语言,是一种混合函数式编程语言.它是由Martin Odersky创建,并于2003年首次发布. Scala平滑地集成面向对象和函数式语言的特点,并且Scala被编译在Java虚 ...

  3. [转]Tomcat----Neither the JAVA_HOME nor the JRE_HOME environment variable is defined

    对于使用IDE开发的程序员来讲,并不是所有人都对自己用来吃饭的工具了如指掌.常在阴沟跑,哪能不翻船.为此我把自己使用Tomcat/Eclipse的一些经验教训整理了一下,会陆续的贴出来,也许会帮到和我 ...

  4. Selenium2(webdirver)入门之环境搭建(Java版)

    一.开发环境: 1.JDK1.6 2.Eclipse:Version: Kepler Service Release 1,下载地址:http://www.eclipse.org/downloads/ ...

  5. Apache OFBiz 研究记录01

    作为Apache 的顶级项目: Apache OFBiz,功能十分强大,一般开发者很难用到全部功能. 这次笔者的研究主要集中在电子商务平台这一块,一步一步解构. OFBiz下载地址:http://of ...

  6. PL/Proxy介绍

    PL/Proxy 介绍 一.概述 1.PL/Proxy 是一个采用PL Language语言的数据库分区系统. 目的:轻松访问分区数据库 它的理念是代理远程函数体内指定.函数调用同样标签创建的函数,所 ...

  7. Python 开发轻量级爬虫04

    Python 开发轻量级爬虫 (imooc总结04--url管理器) 介绍抓取URL管理器 url管理器用来管理待抓取url集合和已抓取url集合. 这里有一个问题,遇到一个url,我们就抓取它的内容 ...

  8. JavaScript高级程序设计学习笔记--引用类型

    Object类型 对象字面量表示法: var person={ name:"Nicholas", age:29, 5:true }; 这人例子会创建一个对象,包含三个属性:name ...

  9. Android studio 自定义打包APK名称

    Android Studio打包应用默认生成的apk名称是:app-release.apk .如果我们要让生成的apk名跟我们版本包名有联系的话,那我们就要自定义生成的apk名了,要怎么做呢. 我们只 ...

  10. SQL Server 子查询

    这些主要是老师上课讲的一些知识点,自己做了一些整理放在这里~~~ 子查询可以是标量的.多值的或是表值的. 在期待单个值的地方可以使用标量子查询.例如,以下查询返回具有最大员工编号的员工信息: SELE ...