学习地址：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. CVE-2018-8120 分析

    目录 CVE-2018-8120 分析 1.实验环境 1.1.操作系统 1.2.用到的分析工具 2.假如 2.1.我想提权 2.2. 有一个处于内核空间,极少被调用的函数 2.3.R3任意修改R0地址 ...

  2. SQLServer之创建辅助XML索引

    创建辅助XML索引 使用 CREATE INDEX (Transact-SQL)Transact-SQL DDL 语句可创建辅助 XML 索引并且可指定所需的辅助 XML 索引的类型. 创建辅助 XM ...

  3. java 服务端I/O非阻塞实现05

    /** * 非阻塞IO多线线程服务端 * 当一个任务进入多线程,这个任务线程需要处理接收信息.发送信息.因而发生I/O阻塞问题 * 利用selector可以实现异步 * */ public class ...

  4. Spring Cloud：Security OAuth2 自定义异常响应

    对于客户端开发或者网站开发而言,调用接口返回有统一的响应体,可以针对性的设计界面,代码结构更加清晰,层次也更加分明. 默认异常响应 在使用 Spring Security Oauth2 登录和鉴权失败 ...

  5. shell 脚本中执行sql

    #!/bin/bashsql='show databases' result=`mysql -uroot -pengine2user -h127.0.0.1 -e "${sql}" ...

  6. Luogu5176 公约数 莫比乌斯反演、线性筛

    传送门 好像是我们联考时候的题目? 一个结论:\(\gcd(ij,ik,jk) \times \gcd(i,j,k) = \gcd(i,j) \times \gcd(i,k) \times \gcd( ...

  7. 关于Jpa和Mybatis的一些看法

    现在网络上充斥着Jpa和Mybatis的一些对比.其实狭义上来说是hibernate和mybatis之间的比较. 例如:为什么感觉国内比较流行的 mybatis 在国外好像没人用的样子? 下面是一些截 ...

  8. 646. Maximum Length of Pair Chain（medium）

    You are given n pairs of numbers. In every pair, the first number is always smaller than the second ...

  9. RocksDB系列二十二:RocksDB使用场景和特性

  10. EQueue

    EQueue 2.3.2版本发布(支持高可用) - dotNET跨平台 - CSDN博客https://blog.csdn.net/sD7O95O/article/details/78097193 E ...