博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
BootStrap入门_创建第一个例子
阅读量:6703 次
发布时间:2019-06-25

本文共 1053 字,大约阅读时间需要 3 分钟。

一、选择合适的IDE

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

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

二、创建一个网页

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

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

 

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

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

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

②再添加页面的主体

     
         

人机大战:李世石投子认输

         

投子认负!围棋人机大战首场比赛中,谷歌计算机围棋程序“阿尔法围棋”(AlphaGo)执白中盘战胜韩国棋手李世石。

      

运行下效果:

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

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

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

最终的效果如下:

 

 

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

转载于:https://www.cnblogs.com/dcz2015/p/5259298.html

你可能感兴趣的文章
Delphi多媒体设计之TMediaPlayer组件(七)
查看>>
生产者消费者问题理解与Java实现
查看>>
mysql中不同事务隔离级别下数据的显示效果--转载
查看>>
健康生活之咖啡---咖啡灌肠
查看>>
java中的字符串简介,字符串的优化以及如何高效率的使用字符串
查看>>
测序原理 - PacBio技术资料
查看>>
张辉:工作几年就应该给自己“清零”
查看>>
史上最全的iOS各种设备信息获取总结(iPhone X 详细信息已更新)
查看>>
13.Android之注解问题
查看>>
分布式 TensorFlow:Distribution Strategy API 丨Google 开发者大会 2018
查看>>
并发、并行傻傻分不清楚?线程的一生都经历些什么?
查看>>
node-"fs-extra"模块代替fs使用
查看>>
multidex解决65k方法数问题
查看>>
移动端适配的各种问题
查看>>
Vue项目pdf(base64)转图片
查看>>
移动端 => 动态改变头部透明度
查看>>
[译] AsyncDisplayKit/Texture 官方文档(1)
查看>>
Git常用命令
查看>>
IPCInvoker,Android跨进程调用如此简单
查看>>
Laravel框架中如何使用Service模式?
查看>>