码迷,mamicode.com
首页 > 编程语言 > 详细

go语言快速入门 BootStrap应用 16

时间:2019-01-20 11:52:16      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:width   ice   AMM   UNC   string   分享   number   for   解压   

这篇文章中我们将会通过简单的实例介绍如何在go语言Web编程中使用BootStrap的方式

BootStrap

Bootstrap源于Twitter的一个机遇HTML/CSS/JS的前端开发框架,它由Twitter的Mark Otto和Jacob Thornton合作开发,简单灵活,使得 Web 开发更加快速便捷。

版本

目前BootStrap虽然推出了4.0.0,但是仍然是Alpha版。这篇文章中仍然使用稳定的BootStrap3.3.7版本。

下载

使用如下步骤,下载和准备BootStrap

步骤详细
Step 1 wget https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
Step 2 unzip bootstrap-3.3.7-dist.zip
Step 3 cd bootstrap-3.3.7-dist/

例子代码

[root@liumiaocn bootstrap-3.3.7-dist]# cat basic-web-bootstrap.go
package main

import "fmt"
import "net/http"
import "html/template"

func Hello(response http.ResponseWriter, request *http.Request) {
        type person struct {
                Id      int
                Name    string
                Country string
        }

        liumiaocn := person{Id: 1001, Name: "liumiaocn", Country: "China"}

        tmpl, err := template.ParseFiles("./user.tpl")
        if err != nil {
                fmt.Println("Error happened..")
        }
        tmpl.Execute(response, liumiaocn)
}

func main() {
        http.HandleFunc("/", Hello)
        http.ListenAndServe(":8080", nil)
}
[root@liumiaocn bootstrap-3.3.7-dist]#
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

BootStrap模板文件

例子中使用的bootstrap.min.css和bootstrap.min.js均使用了cdn进行引用。

[root@liumiaocn bootstrap-3.3.7-dist]# cat user.tpl
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Bootstrap Template Page for Go Web Programming</title>

    <!-- Bootstrap core CSS -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Person general infor</a>
        </div>
      </div>
    </nav>

    <div class="jumbotron">
      <div class="container">
        <h1>Hello, {{.Name}}</h1>
        <ul>
        <li>Name   : {{.Name}}<p>
        <li>Id     : {{.Id}}<p>
        <li>Country: {{.Country}}
        </ul>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">More &raquo;</a></p>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <h2>Name</h2>
          <p>Name has the value of : {{.Name}} </p>
          <p><a class="btn btn-default" href="#" role="button">More &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Id</h2>
          <p>Id has the value of : {{.Id}} </p>
          <p><a class="btn btn-default" href="#" role="button">More &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>Country</h2>
          <p>Country has the value of : {{.Country}} </p>
          <p><a class="btn btn-default" href="#" role="button">More &raquo;</a></p>
        </div>
      </div>

      <hr>

      <footer>
      <nav class="navbar navbar-inverse ">
        <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Hello, {{.Name}}, Welcome to go programming...</a>
          </div>
        </div>
      </nav>
      </footer>
    </div> <!-- /container -->

    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>
[root@liumiaocn bootstrap-3.3.7-dist]#
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73

执行确认

[root@liumiaocn bootstrap-3.3.7-dist]# go run basic-web-bootstrap.go
  • 1

结果画面

技术分享图片

总结

本文使用BootStrap作为模板页面渲染,go语言提供Web框架和控制,可以看出仅仅需要非常少的动作即可开发。但是在实际的开发中目前还没有那么轻松,比如在例子中使用的bootstrap.min.css和bootstrap.min.js均使用了cdn进行引用,使用cdn不但非常简单,而且能够减轻网站IO的压力。但是使用cdn这个角度上来说,事前的准备比如下载BootStrap解压设定等操作均为无用之举,但是如果需要用go进行框架的设计又不需要或者不想使用reveal等Web框架,自行设计的时候这些在很多情况下都是绕不过去的问题,在后续的讨论中会继续延伸如何设计go的Web框架。

参考项目

项目名称URL
go-bootstrap https://github.com/go-bootstrap/go-bootstrap

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

go语言快速入门 BootStrap应用 16

标签:width   ice   AMM   UNC   string   分享   number   for   解压   

原文地址:https://www.cnblogs.com/firsttry/p/10294015.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!