go语言快速入门:BootStrap应用(16)

wx57f63dceec388 · · 163 次点击 · · 开始浏览    

参考链接: 讨论Bootstrap

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

BootStrap 

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

版本 

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

项目版本BootStrap版本3.3.7下载地址https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip 

下载 

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

步骤详细Step 1wget https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zipStep 2unzip bootstrap-3.3.7-dist.zipStep 3cd 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]# 

BootStrap模板文件 

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

[root@liumiaocn bootstrap-3.3.7-dist]# cat user.tpl

<html>

  <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>

        <div>

          <a href="#">Person general infor</a>

        </div>

      </div>

    </nav>


    <div>

      <div>

        <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>

      <div>

        <div>

          <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>

          <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>

          <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>

          <div>

            <a 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]# 

执行确认 

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

结果画面 

 

总结 

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

参考项目 

项目名称URLgo-bootstraphttps://github.com/go-bootstrap/go-bootstrap



有疑问加站长微信联系(非本文作者)

本文来自:51CTO博客

感谢作者:wx57f63dceec388

查看原文:go语言快速入门:BootStrap应用(16)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:701969077

163 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传