访问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. gentoo 安装

    加载完光驱后 1进行ping命令查看网络是否通畅 2设置硬盘的标识为GPT(主要用于64位且启动模式为UEFI,还有一个是MBR,主要用于32位且启动模式为bois) parted -a optima ...

  2. SQL Server 2014 新特性——内存数据库

    SQL Server 2014 新特性——内存数据库 目录 SQL Server 2014 新特性——内存数据库 简介: 设计目的和原因: 专业名词 In-Memory OLTP不同之处 内存优化表 ...

  3. 事务日志已满，原因为“ACTIVE_TRANSACTION”

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 异常处理汇总-数据库系列  http://www.cnblogs.com/dunitia ...

  4. Nested Loops join时显示no join predicate原因分析以及解决办法

    本文出处:http://www.cnblogs.com/wy123/p/6238844.html 最近遇到一个存储过程在某些特殊的情况下,效率极其低效, 至于底下到什么程度我现在都没有一个确切的数据, ...

  5. 自己来实现一个简易的OCR

    来做个简易的字符识别 ,既然是简易的 那么我们就不能用任何的第三方库 .啥谷歌的 tesseract-ocr, opencv 之类的 那些玩意是叼 至少图像处理 机器视觉这类课题对我这种高中没毕业的人 ...

  6. python基础

    内容概要: 一.python2 or python3 目前大多使用python2.7,随着时间的推移,python3将会成为python爱好者的主流. python2和3区别: 1.PRINT IS ...

  7. [修正] Firemonkey TFrame 存档后，下次载入某些事件连结会消失（但源码还在）

    问题:Firemonkey TFrame 存档后,下次载入某些事件连结会消失(但源码还在) 解决:(暂时方法) type TTestFrame = class(TFrame) public const ...

  8. 【从零开始学BPM，Day1】工作流管理平台架构学习

    [课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第一天课程] Step 1 软件下载:H3 BPM10.0全开 ...

  9. js月份，日期加一天

    js没有直接可以用的函数,所以只能自己写,其中需要涉及到每个月天数的判断,如果是2月份的话,还要涉及到闰年的判断 var addDate = { //日期,在原有日期基础上,增加days天数,默认增加 ...

  10. ES6 箭头函数中的 this？你可能想多了（翻译）

    箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. ...