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. django rest framework 的url标签的问题

    如何在模板中引用一个在rest framework中的url? urls.py from django.conf.urls import patterns, url from .views impor ...

  2. iOS UILocalNotification 每2周，每两个月提醒

    iOS 的UILocalNotification提醒提供了默认的重复频率,比如,一天,一个星期等等,但是对于非标准的频率,比如每,2周,每2个月,无法重复提醒. 我们的思路是在应用程序开始时,把即将发 ...

  3. mysql的innodb中事务日志ib_logfile

    mysql的innodb中事务日志ib_logfile事务日志或称redo日志,在mysql中默认以ib_logfile0,ib_logfile1名称存在,可以手工修改参数,调节开启几组日志来服务于当 ...

  4. PHP生命周期

    2015-08-19 15:05:30 周三 一篇很好的文章 PHP内核探索 总结一下 1. 模块初始化 MINIT 各个PHP模块/扩展初始化内部变量, 告诉PHP调用自己的函数时, 函数体在哪里( ...

  5. DataTemplate应用

    在WPF中,决定数据外观的是DataTemplate,即DataTemplate是数据内容的表现形式,一条数据显示成什么样子,是简单的文本还是直观的图形,就是由DataTemplate决定的.下面通过 ...

  6. 5.js模式-职责链模式

    1. 职责链模式 将对象连成一条链,并沿着这条链传递请求,直到有一个对象处理它为止. var chain = function(fn){ this.fn = fn; this.successor = ...

  7. Effective C++ -----条款46：需要类型转换时请为模板定义非成员函数

    当我们编写一个class template,而它所提供之“与此template相关的”函数支持“所有参数之隐式类型转换”时,请将那些函数定义为“class template内部的friend函数”.

  8. Effective C++ -----条款24：若所有参数皆需类型转换，请为此采用non-member函数

    如果你需要为某个函数的所有参数(包括被this指针所指的那个隐喻参数)进行类型转换,那么这个函数必须是个non-member.

  9. 用原生DOM 遍历页面节点

    代码丢失,直接上图:

  10. HTML DOM scale() 方法

    语法 scale(sx, sy) 参数 参数 描述 sx, sy 水平和垂直的缩放因子. 描述 scale() 方法为画布的当前变换矩阵添加一个缩放变换.缩放通过独立的水平和垂直缩放因子来完成.例如, ...