访问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. Unity3d学习 预设体(prefab)的一些理解

    之前一直在想如果要在Unity3d上创建很多个具有相同结构的对象,是如何做的,后来查了相关资料发现预设体可以解决这个问题! 预设体的概念: 组件的集合体 , 预制物体可以实例化成游戏对象. 创建预设体 ...

  2. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  3. Bootstrap 模态框(Modal)插件

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

  4. SQL Server-聚焦使用视图若干限制/建议、视图查询性能问题，你懵逼了？（二十五）

    前言 上一节我们简单讲述了表表达式的4种类型,这一系列我们来讲讲使用视图的限制,简短的内容,深入的理解,Always to review the basics. 避免在视图中使用ORDER BY 上一 ...

  5. Xamarin+Prism小试牛刀：定制跨平台Outlook邮箱应用

    通过本文你将学会如下内容: 1,如何使用Xamarin开发跨平台(Windows,Android,iOS)应用. 2,如何使用微软的登录界面登入Microsoft账号. 3,如何使用Outlook邮箱 ...

  6. DBA成长路线

    从开发转为数据库管理,即人们称为DBA的已经有好几年,有了与当初不一样的体会.数据是企业的血液,数据是石油,数据是一切大数据.云计算的基础.作为DBA是数据的保卫者.管理者,是企业非常重要的角色.对于 ...

  7. 邮件中嵌入html中要注意的样式

    工作中常会有需求向用户发送邮件,需要前端工程师来制作html格式的邮件,但是由于邮件客户端对样式的支持有限,要兼容很多种浏览器需要注意很多原则: 1.邮件使用table+css布局 2.邮件主要部分在 ...

  8. Javascript实现HashTable类

    散列算法可以尽快在数据结构中找出指定的一个值,因为可以通过Hash算法求出值的所在位置,存储和插入的时候都按照Hash算法放到指定位置. <script> function HashTab ...

  9. java统计字符串单词的个数

    在一些项目中可能需要对一段字符串中的单词进行统计,我在这里写了一个简单的demo,有需要的同学可以拿去看一下. 本人没怎么写个播客,如果有啥说的不对的地方,你来打我啊 不说废话了直接贴代码: 实现代码 ...

  10. Atitit.研发团队与公司绩效管理的原理概论的attilax总结

    Atitit.研发团队与公司绩效管理的原理概论的attilax总结 1. 四个理念 1 1.1. 绩效管理的三个目的.四个环节.五个关键2 1.2. 绩效目标smart2 2. 考核对象2 3. 绩效 ...