BootStrap入门_创建第一个例子
一、选择合适的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入门_创建第一个例子的更多相关文章
- Activity工作流(2)-入门安装运行第一个例子
转: Activity工作流(2)-入门安装运行第一个例子 置顶 2017年05月24日 15:58:50 li_ch_ch 阅读数:24432 版权声明:本文为博主原创文章,未经博主允许不得转载 ...
- spring boot入门 -- 介绍和第一个例子
"越来越多的企业选择使用spring boot 开发系统,spring boot牛在什么地方?难不难学?心动不如行动,让我们一起开始学习吧!" 使用Spring boot ,可以轻 ...
- RequireJS入门之一——实现第一个例子
为什么学习RequireJS? 像我这种菜鸟,会提到海量文章里提到的AMD.JS模块化编程.异步... ... 等等 RequireJS是一个Javascript 文件和模块框架,它可以帮我们去管理j ...
- 1、Flutter_初体验_创建第一个应用_AndroidStudio_windows
1.前言 至于 Flutter 是啥,我就不在这啰嗦了,下面以 windows 为例,展示一下从安装 Flutter 到运行 APP 整个过程: 2.安装 Flutter 2.1.中文介绍文档:htt ...
- vue入门之创建第一个实例,挂载点、模板和实例之间的关系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- AngularJs轻松入门(一)创建第一个应用
AngularJs是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web ...
- Springboot环境搭建_第一个例子
首先创建一个maven项目 maven项目创建完成之后,找到pom.xml配置节点.需要springboot-starter-web ,springboot-starter-test,springbo ...
- K8S使用入门-创建第一个容器
前面两个教程我们已经使用kubekit将K8S搭建起来了.但是,没有将实际使用中需要在K8S上部署我们的容器创建起来的教程,都是耍流氓.所以,经过几番折腾,我回来给自己洗白了.之前一直卡在创建第一个容 ...
- Spring_MVC_教程_快速入门_深入分析
Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门 资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...
随机推荐
- POJ_2100_Graveyard_Design_(尺取法)
描述 http://poj.org/problem?id=2100 求连续平方和=n的序列个数,并输出序列. Graveyard Design Time Limit: 10000MS Memory ...
- EF中执行存储过程,获取output返回值
EF不能直接支持执行存储过程,于是使用转化成执行SQL语句的形式,却怎么也获取不到output的值,折腾的好久,终于解决了,分享下曲折的经历: public int AddVote(int title ...
- MTK Android Driver知识大全
一.Display 1.lcm 相关概念1.1) MIPI接口:一共有三种接口:DBI(也做CPU或MCU接口).DPI(也叫RGB接口).DSI.在使用DSI接口时,目前75/77都只支持到2条da ...
- 用C++的类做三种优先队列的实现
学过数据结构的都知道优先队列这种东西,普通的队列是依据入队顺序,先入队的先出队,而优先队列则是依照键值,键值越大(或越小),就越先出队. 所以,优先队列基本支持push,pop,empty,size, ...
- SRM 447(1-250pt, 1-500pt)
DIV1 250 水题...略. DIV1 500 抽象题意:有一个图,指定其中亮点p1和p2,删掉途中其他的一些点,使得p1和p2最短路大于3. 解法:使得p1和p2最短路为2的点一定要删掉.然后, ...
- A Practical Guide to Distributed Scrum - 分布式Scrum的实用指南 - 读书笔记
最近读了这本IBM出的<A Practical Guide to Distributed Scrum>(分布式Scrum的实用指南),书中的章节结构比较清楚,是针对Scrum项目进行,一个 ...
- 蜗牛—JSP学习之JavaBean初识
初识: <%@ page language="java" import="java.util.*" pageEncoding="utf-8&qu ...
- ActivityGroup相关--getLocalActivityManager()
ActivityGroup简介 1.ActivityGroup的核心就是继承了该类,能够通过getLocalActivityManager()得到一个LocalActivityManager 如,Lo ...
- 最简单的基于FFMPEG的视频编码器(YUV编码为H.264)
本文介绍一个最简单的基于FFMPEG的视频编码器.该编码器实现了YUV420P的像素数据编码为H.264的压缩编码数据.编码器代码十分简单,可是每一行代码都非常重要,适合好好研究一下.弄清楚了本代码也 ...
- Win32下 Qt与Lua交互使用:配置Qt下Lua运行环境
Lua与C++之间可以实现非常强的交互性.Lua中可以使用C++中的函数,C++中也可以使用Lua中的函数.由此可以引发出很多奇思妙想了. 简单来说,Lua动态的特性补充了C++的功能.当然,也看你具 ...