一、选择合适的IDE

一般前端开发选用的都是WebStorm、Brackets等，因为本人对VS比较熟悉，索性就拿VS进行练习了，而且VS练习有些好处，就是通过nuget方式获取BootStrap可以在进行页面编写的时候获得智能提示。我之前使用了Brackets，学习的时候感觉太难，没有智能提示都不知道写什么。

目的仿照这个最简单的做一个页面出来

二、创建一个网页

1.创建一个新的web工程，选择空白就可以

2.使用nuget方式，获取BootStrap CSS，方式如下

3.安装完成后，创建一个新的HTML页面

4.引入刚刚安装好的bootstrap.min.css文件到index.html文档，然后就可以开始写代码了。

①先在body中添加一个导航。

<nav class="navbar navbar-default navbar-fixed-top">

     <div class="container">

          <div class="navbar-header">

               <a href="#" class="navbar-brand">ProjectName</a>

          </div>

          <div id="navbar" class="collapse navbar-collapse">

               <ul class="nav navbar-nav">

                   <li class="active"><a href="#">首页</a></li>

                   <li><a href="#">关于</a></li>

               </ul>

          </div>

     </div></nav>

②再添加页面的主体

<div class="container">

     <div class="maincontent">

         <h1>人机大战：李世石投子认输</h1>

         <p class="lead">投子认负！围棋人机大战首场比赛中，谷歌计算机围棋程序“阿尔法围棋”(AlphaGo)执白中盘战胜韩国棋手李世石。</p>

      </div>

</div>

运行下效果:

页面效果如下，可以看到页面的内容被覆盖住了，调整一下CSS的样式

在<head>标签内添加如下CSS样式：

<style>

    .maincontent {

         padding:50px 20px;

         text-align:center;
     }

</style>

最后再把，navbar的样式改成黑色就行了，navbar-default变成navbar-inverse

最终的效果如下：

备注：遇到了一个小问题，就是navbar不是在body当中么，但是我修改body的padding-top为什么只有内容在移动，而nav并没有移动呢？我在下面找到了答案。(上面的代码没有试验)

http://www.imooc.com/qadetail/60376

BootStrap入门_创建第一个例子的更多相关文章

  1. Activity工作流(2)-入门安装运行第一个例子

    转: Activity工作流(2)-入门安装运行第一个例子 置顶 2017年05月24日 15:58:50 li_ch_ch 阅读数:24432   版权声明:本文为博主原创文章,未经博主允许不得转载 ...

  2. spring boot入门 -- 介绍和第一个例子

    "越来越多的企业选择使用spring boot 开发系统,spring boot牛在什么地方?难不难学?心动不如行动,让我们一起开始学习吧!" 使用Spring boot ,可以轻 ...

  3. RequireJS入门之一——实现第一个例子

    为什么学习RequireJS? 像我这种菜鸟,会提到海量文章里提到的AMD.JS模块化编程.异步... ... 等等 RequireJS是一个Javascript 文件和模块框架,它可以帮我们去管理j ...

  4. 1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

    1.前言 至于 Flutter 是啥,我就不在这啰嗦了,下面以 windows 为例,展示一下从安装 Flutter 到运行 APP 整个过程: 2.安装 Flutter 2.1.中文介绍文档:htt ...

  5. vue入门之创建第一个实例，挂载点、模板和实例之间的关系

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. AngularJs轻松入门（一）创建第一个应用

    AngularJs是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web ...

  7. Springboot环境搭建_第一个例子

    首先创建一个maven项目 maven项目创建完成之后,找到pom.xml配置节点.需要springboot-starter-web ,springboot-starter-test,springbo ...

  8. K8S使用入门-创建第一个容器

    前面两个教程我们已经使用kubekit将K8S搭建起来了.但是,没有将实际使用中需要在K8S上部署我们的容器创建起来的教程,都是耍流氓.所以,经过几番折腾,我回来给自己洗白了.之前一直卡在创建第一个容 ...

  9. Spring_MVC_教程_快速入门_深入分析

    Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门  资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...

随机推荐

  1. Enter键提交表单

    input type="submit"在360浏览器上不能提交   用了这个 <input type="button" class="btn b ...

  2. Web---自己写的一个简单云相册~

    实现的功能是: 用户可以一次上传一个至多个文件. 用户可以下载其他人上传的图片. 用户可以查看其他所有人的图片. 用户只能删除通过自己IP上传的图片. 用到的技术: 文件上传下载.设计模式.Dom4j ...

  3. 进程与线程（四） linux进程间通信的方式总结

    1概述: 上文说到,每个进程都有自己的地址空间,包括什么呢?向下生长得栈,向上生长的堆,代码段,数据段等,这些都是进程私有的,如何实现通信的呢?通信需要媒介,这个媒介很重要. 对于研发人员来说,进程不 ...

  4. .net常見面試題(四)

    1. .Net.C#.VisualStudio之间的关系是什么? .Net一般指的是.Net Framework,提供了基础的.Net类,这些类可以被任何一种.Net编程语言调用,.Net Frame ...

  5. hdoj 1150 Machine Schedule【匈牙利算法+最小顶点覆盖】

    Machine Schedule Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  6. Yii 安装二维码扩展Qrcode

    比如要添加 https://github.com/2amigos/yii2-qrcode-helper 生成二维码的 这个扩展第一种方法 :    1.打开根目录的composer.json, 在re ...

  7. 在C#中如何确定一个文件是不是文本文件，以及如何确定一个文件的类型

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:在C#中如何确定一个文件是不是文本文件,以及如何确定一个文件的类型.

  8. MFC/VC++ UI界面美化技术

    1.     工具: 1.1设备环境类: Windows下的绘图操作说到底就是DC操作.DC(Device Context设备环境)对象是一个抽象的作图环境,可能是对应屏幕,也可能是对应打印机或其它. ...

  9. MSDN无法显示该页的解决办法

    今天打开msdn,发现 查阅api时候 出现 “无法显示该页的解决办法“ 这个问题.解决方案如下: 在“运行”中输入regsvr32 "C:\Program Files\Common Fil ...

  10. Java基础知识强化之集合框架笔记63：Map集合之HashMap嵌套ArrayList

    1. ArrayList集合嵌套HashMap集合并遍历. 需求:假设ArrayList集合的元素是HashMap.有3个.每一个HashMap集合的键和值都是字符串.元素我已经完成,请遍历. 结果: ...