访问Bootstrap中文网，下载bootstrap中文文档，选择用于生产环境的bootstrap。

在官网使用ctrl+f查找想要的内容。

这里记一下Visual Studio Code软件的用法：

可以点击  F1——sni——html打开html.json文件，里面可以配置常用的代码，

引入文档：

 <!DOCTYPE html>

 <html>

     <head>

         <title>bootstrap入门</title>

         <meta charset="UTF-8">          <!--不能乱码-->

         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

         <!--手机设备可以正常显示-->

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

         <!--引入bootstrap.min.css文件-->

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

         <!--需要先引入jQuery,如果本地没有jQuery，可以在网上搜索一下，使用http在线的jQuery-->

         <script src="js/bootstrap.min.js"></script>

         <!--引入bootstrap.min.js文件-->

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

         <link rel="stylesheet" href="css/index.css"/>

         <!--引入自己写的css-->

     </head>

     <body>

         <div class="container lie">

             <div class="row">

                 <div class="col-md-1">.col-md-1</div>

                 <div class="col-md-1">.col-md-1</div>

                 <div class="col-md-1">.col-md-1</div>

                 <div class="col-md-1">.col-md-1</div>

                 <div class="col-md-1">.col-md-1</div>

                 <div class="col-md-1">.col-md-1</div>

                 <div class="col-md-1">.col-md-1</div>

                 <div class="col-md-1">.col-md-1</div>

                 <div class="col-md-1">.col-md-1</div>

                 <div class="col-md-1">.col-md-1</div>

                 <div class="col-md-1">.col-md-1</div>

                 <div class="col-md-1">.col-md-1</div>

             </div>

             <div class="row">

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

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

             </div>

             <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 class="row">

                 <div class="col-lg-3 col-md-6 col-sm-8 col-xs-10 ">

                     <div class="col-md-6 son">

                         <h2>标题1</h2>

                     </div>

                 </div>

                 <div class="col-lg-3 col-md-6 col-sm-8 col-xs-10 col-xs-push-1 col-sm-push-1">.col-md-6</div>

             </div>

         </div>

     </body>

 </html>

bootstrap的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap（二）

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap（一）

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  10. [BootStrap] 富编辑器，基于wysihtml5

    在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

随机推荐

  1. Javascript生成二维码（QR）

    网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...

  2. SQL：指定名称查不到数据的衍伸~空格 换行符 回车符的批量处理

    异常处理汇总-数据库系列  http://www.cnblogs.com/dunitian/p/4522990.html 先看看啥情况 复制查询到的数据,粘贴一下看看啥情况 那就批量处理一下~ 就这样 ...

  3. Oracle Database 12c Data Redaction介绍

    什么是Data Redaction Data Redaction是Oracle Database 12c的高级安全选项之中的一个新功能,Oracle中国在介绍这个功能的时候,翻译为“数据编纂”,在EM ...

  4. Node.js：理解stream

    Stream在node.js中是一个抽象的接口,基于EventEmitter,也是一种Buffer的高级封装,用来处理流数据.流模块便是提供各种API让我们可以很简单的使用Stream. 流分为四种类 ...

  5. 9、委托、事件、Lambda

    开始 关于委托,肯定是要有问题的. 第一个问题,委托用来干什么? 看.net中的表述:在.net平台下,委托类型用来定义和相应应用程序中的回调.(回调?处理内存中两个实体双向通信的一种技术.)   第 ...

  6. BPM嵌入式流程解决方案分享

    一.需求分析由于企业业务的独特性或者企业高层独特的管理思想,很多客户选择了自行开发业务系统的方式来实现独有的竞争力. 这类信息系统通常经过了多年的开发,伴随着企业的发展一直在不断优化,与企业的业务非常 ...

  7. 浅析SQL查询语句未显式指定排序方式，无法保证同样的查询每次排序结果都一致的原因

    本文出处:http://www.cnblogs.com/wy123/p/6189100.html 标题有点拗口,来源于一个开发人员遇到的实际问题 先抛出问题:一个查询没有明确指定排序方式,那么,第二次 ...

  8. eclipse,myeclipse 误删文件，回滚历史文件操作

    昨天因为误操作把一个写了一上午的代码给删了,找到的这个,以前竟然还没发现有这个功能- -! 具体操作: 1.建立同路径同名的文件 2.文件上右键 --> Compare With --> ...

  9. ASP.NET MVC Model验证(一)

    ASP.NET MVC Model验证(一) 前言 前面对于Model绑定部分作了大概的介绍,从这章开始就进入Model验证部分了,这个实际上是一个系列的Model的绑定往往都是伴随着验证的.也会在后 ...

  10. C语言图形库简单对比及EGE库的安装小手册

    近期在琢磨C语言的图形库,发现主要有如下几种选择: Turbo C 的graphics库 SDL EasyX EGE 1. 普遍认为Graphics库太老了,而且TurboC本身使用比较麻烦,网上一边 ...