访问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. AutoMapper随笔记

    平台之大势何人能挡? 带着你的Net飞奔吧! http://www.cnblogs.com/dunitian/p/4822808.html#skill 先看效果:(完整Demo:https://git ...

  2. ASP.NET MVC5+EF6+EasyUI 后台管理系统 (源码购买说明)

    系列目录 升级日志 !!!重大版本更新:于2016-12-20日完成了系统的结构重构并合并简化了T4(这是一次重要的更新,不需要修改现有功能的代码),代码总行数比上个版本又少了1/3.更新了代码生成器 ...

  3. 【C#代码实战】群蚁算法理论与实践全攻略——旅行商等路径优化问题的新方法

    若干年前读研的时候,学院有一个教授,专门做群蚁算法的,很厉害,偶尔了解了一点点.感觉也是生物智能的一个体现,和遗传算法.神经网络有异曲同工之妙.只不过当时没有实际需求学习,所以没去研究.最近有一个这样 ...

  4. 独立开发 一个社交 APP 的架构分享 (已实现)

    (本博客为原创:http://www.cnblogs.com/linguanh/)   My BananaCloud Android Application 前言:  这算是我的第一个 完完全全 由自 ...

  5. ASP.NET中画图形验证码

    context.Response.ContentType = "image/jpeg"; //生成随机的中文验证码 string yzm = "人口手大小多少上中下男女天 ...

  6. MVC还是MVVM？或许VMVC更适合WinForm客户端

    最近开始重构一个稍嫌古老的C/S项目,原先采用的技术栈是『WinForm』+『WCF』+『EF』.相对于现在铺天盖地的B/S架构来说,看上去似乎和Win95一样古老,很多新入行的,可能就没有见过经典的 ...

  7. Node.js使用PM2的集群将变得更加容易

    介绍 众所周知,Node.js运行在Chrome的JavaScript运行时平台上,我们把该平台优雅地称之为V8引擎.不论是V8引擎,还是之后的Node.js,都是以单线程的方式运行的,因此,在多核心 ...

  8. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

  10. Create a bridge using a tagged vlan (8021.q) interface

    SOLUTION VERIFIED April 27 2013 KB26727 Environment Red Hat Enterprise Linux 5 Red Hat Enterprise Li ...