学习地址：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. Python模块time、datetime

    模块: 模块是一系列常用功能的集合体,一个py文件就是一个模块. 一.模块的作用: 1.从文件级别组织程序,方便管理,随着程序的发展,功能越来越多,我们通常将程序分成一个个py文件,这样做程序的结构更 ...

  2. 【转载】DSP基础--定点小数运算

    在FPGA实现算法过程中,大多数情况是用占用资源较少,延迟较低的定点数代替浮点数参与运算.那么浮点与定点数之间的区别以及转换方式是怎么的?下边这篇博文详细说明了这一问题.虽然是针对DSP芯片的,但思想 ...

  3. python3 deque（双向队列）

    创建双向队列 import collections d = collections.deque() append(往右边添加一个元素) import collections d = collectio ...

  4. Asp.Net Core 实现谷歌翻译ApI 免费版

    由于谷歌翻译官方API是付费版本,本着免费和开源的精神.分享一下用 Net Core 实现谷歌翻译API的代码. 项目引用的Nuget 包: ChakraCore.NET Newtonsoft.Jso ...

  5. 日志学习系列（四）——NLog实例

    具体不想介绍了,新建一个解决方案 ,直接用NuGet安装就行了 具体项目代码可以在https://github.com/qiuxianhu/SimpleNLog下载

  6. Python爬虫【实战篇】百度翻译

    先看代码 import requests headers = { "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS ...

  7. springmvc中的类型转换器

    在使用springmvc时可能使用@RequestParam注解或者@RequestBody注解,他们的作用是把请求体中的参数取出来,给方法的参数绑定值. 假如方法的参数是自定义类型,就要用到类型转换 ...

  8. wxWidgets 和 QT 之间的选择

    (非原创,网络摘抄) 跨平台的C++ GUI工具库很多,可是应用广泛的也就那么几个,Qt.wxWidgets便是其中的翘楚这里把GTK+排除在外,以C实现面向对象,上手相当困难,而且Windows平台 ...

  9. python3 今日大纲 day05

    1. 上周内容回顾 1. 闭包: 内层函数对外层函数变量的使用 def outer(): a = 10 def inner(): print(a) return inner ret = outer() ...

  10. vs2017创建.net core 应用程序，发布到Linux

    1.打开vs2017,创建.net core 应用程序 压缩上传到linux