学习地址：http://www.runoob.com/bootstrap/bootstrap-tutorial.html

自己练习了下

主要是使用了bootstrap中包含的class类样式，只要给相应的HTML元素添加上该类，就可以实现相应的效果。

只是需要记住都有哪些class，并依据相应的语法实现。

完整代码:

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" href="../bootstrap.min.css">

    <script src="../jquery-3.3.1.min.js"></script>

    <script src="../bootstrap.min.js"></script>

    <style>

      .fakeimg{

        height: 200px;

        background-color: darkgray;

      }

    </style>

</head>

<body>

  <div class="jumbotron text-center" style="margin-bottom:0">

    <h1>我的第一个 Bootrap 页面!</h1>

    <p>重置浏览器窗口大小查看效果</p>

  </div>

  <nav class="navbar navbar-inverse" role="navigation">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a href="#" class="navbar-brand">网站名</a>

    </div>

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

      <ul class="nav navbar-nav">

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

        <li><a href="#">页面2</a></li>

        <li><a href="#">页面3</a></li>

      </ul>

    </div>

  </nav>

  <div class="container">

    <div class="row">

      <div class="col-sm-4">

          <h2>关于我</h2>

          <h4>我的照片</h4>

          <div class="fakeimg">这边插入图像</div>

          <span>关于我的介绍...</span>

          <h3>链接</h3>

          <h5>描述文本</h5>

          <ul class="nav nav-pills nav-stacked">

            <li class="active"><a href="#">链接1</a></li>

            <li><a href="#">链接2</a></li>

            <li><a href="#">链接3</a></li>

          </ul>

      </div>

      <div class="col-sm-8">

          <h2>标题</h2>

          <h4>副标题</h4>

          <div class="fakeimg">图像</div>

          <p>一些文本</p>

          <p>

              菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！

          </p>

          <h2>标题</h2>

          <h4>副标题</h4>

          <div class="fakeimg">图像</div>

          <p>一些文本</p>

          <p>

              菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！

          </p>

      </div>

    </div>

  </div>

  <div class="jumbotron text-center" style="margin-bottom:0">

    <span>底部内容</span>

  </div>

</body>

</html>

需要引入bootstrap.min.css , jquery.min.js , bootstrap.min.js文件

只要记住了这些class类的名称及用法，还是比较简单的，添加样式时会更加简便一点。

bootstrap浅谈的更多相关文章

  1. 浅谈angular2+ionic2

    浅谈angular2+ionic2   前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别.   1. 项目所用:angular2+ionic2 ...

  2. 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  3. Vue浅谈

    谈Vue 最近在学习Vue相关的知识点并且也做一些练手,就在学习过程中出现的各种坑爹的地方做一个总结!之后再遇到也不会抓瞎. 1.Vue工程的安装 (1)首先先安装node.js这是Vue的运行基础. ...

  4. 【ASP.NET MVC系列】浅谈NuGet在VS中的运用

    一     概述 在我们讲解NuGet前,我们先来看看一个例子. 1.例子: 假设现在开发一套系统,其中前端框架我们选择Bootstrap,由于选择Bootstrap作为前端框架,因此,在项目中,我们 ...

  5. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  6. 【ASP.NET MVC系列】浅谈ASP.NET MVC 视图与控制器传递数据

    ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...

  7. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  8. 浅谈Normalize.css

    浅谈Normalize.css 一.总结 1.Normalize.css:它在默认的HTML元素样式上提供了跨浏览器的高度一致性,花了几百个小时来努力研究不同浏览器的默认样式的差异. 2.优于rese ...

  9. Java线上问题排查神器Arthas快速上手与原理浅谈

    前言 当你兴冲冲地开始运行自己的Java项目时,你是否遇到过如下问题: 程序在稳定运行了,可是实现的功能点了没反应. 为了修复Bug而上线的新版本,上线后发现Bug依然在,却想不通哪里有问题? 想到可 ...

随机推荐

  1. User Agent 大全

    一.基础知识篇: Http Header之User-Agent User Agent中文名为用户代理,是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA.它是一个特殊字符串头 ...

  2. 在Windows 10中截取截图的6种方式 简介

    在Windows 10中截取截图的6种方式 简介 截图对于不同的目的很重要.它可以用于捕获笔记本电脑上的任何内容的截图.所以,如果你使用Windows 10,你可能不知道如何截图,因为它是比较新的.因 ...

  3. 用人类社会工程学对C语言中的一些基本概念的剖析与理解

    最近在学C语言程序设计时总是遇到一些概念理解上的不清晰与混乱的地方,在一次偶然间想到了以前看过的一部电影<我是谁,没有一个系统是安全的>,里面的主角用社会工程学的想法结合黑客知识化险为夷, ...

  4. The 16th Zhejiang provincial collegiate programming contest

    今天我挺有状态的,看过的题基本都给了正解(可能是昨晚cf div3打得跟屎一样,人品守恒,不好意思发题解了),自己也给队伍签了很多水题(不敢让队友写,怕出锅). 最后6题滚了,有点可惜.还差B和K没做 ...

  5. 在Bootstrap开发框架中使用dataTable直接录入表格行数据

    在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单 ...

  6. NTT板子

    不说别的. 这份NTT跑得比FFT快,不知道为什么. 以下代码针对\(10^5\)的数据范围. #include<cstdio> #include<vector> #inclu ...

  7. 最速下降方法和Newton方法

    目录 最速下降方法 Euclid范数和二次范数 采用\(\ell_1\)-范数的最速下降方向 Newton 方法 Newton 步径 二阶近似的最优解 线性化最优性条件的解 Newton 步径的仿射不 ...

  8. 转 vue实现双向数据绑定之原理及实现篇

    转自:https://www.cnblogs.com/canfoo/p/6891868.html vue的双向绑定原理及实现 前言 先上个成果图来吸引各位: 代码:                  ...

  9. JAXB注解的使用详解

    前言: 最近一直在做各种接口的对接,接触最多的数据类型就是JSON和XML数据,还有XML中包含JSON的数据,而在Java中对象和XML之间的转换经常用到JAXB注解,抽空在这里总结一下,首先做一下 ...

  10. static与final区别

    1. final   final类不能被继承,没有子类,final类中的方法默认是final的 final方法不能被子类的方法复盖,但可以被继承 final成员变量表示常量,只能被赋值一次,赋值后不能 ...