正因为生来什么都没有,因此我们能拥有一切。(o゚▽゚)o

  • 微信公众号
  • 关于Bootstrap的一些基础东西

    jingyile·2018-08-08·115 次阅读

    Bootstrap是一个前端框架,可帮助开发人员启动Web开发程序。

    Bootstrap网格系统可以创建一个移动友好和响应式的网站。

    Bootstrap封装了许多有用的组件,可以很容易地在网站项目中使用。

    Bootstrap 是基于 HTML、CSS、JavaScript 的。

    Bootstrap文件下载链接

    打开代码编辑器并创建一个新的HTML文件

    在页面底部包含JavaScript文件 - 在关闭<body>标签(即</body>)之前,以提高网页的性能。
    注意css和Javascript的相对路径。

    附上来自菜鸟联盟提供的几个链接:

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选的Bootstrap主题文件(一般不使用) -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    网格系统允许我们正确地布局我们网站的内容。

    它将屏幕划分为多个行和列,可用于创建各种类型的布局。

    一旦我们定义了行和列,我们可以在其中放置HTML元素。

    Bootstrap的网格系统将屏幕划分为列 - 每行最多12个。

    列宽根据屏幕的大小而变化。

    因此,Bootstrap的网格系统是响应式的,因为当浏览器窗口的大小改变时,列动态地调整大小

    Bootstrap也有很多非常好看的button 按钮标签可以使用,比起HTML自定义的按钮好看很多。

    用法: <button class="btn btn-XX">name </button>

    按钮有各种颜色选项

    • btn-default为白色
    • btn-primary为深蓝色
    • btn-success为绿色
    • btn-info为浅蓝色
    • btn-warning为橙色
    • btn-danger为红色

    各种尺寸

    • btn-lg用于大按钮
    • btn-sm用于小按钮
    • btn-xs用于超小的按钮

    还有一些辅助类的按钮可用:

    • btn-block将使按钮跨越整个网格
    • active将使按钮看起来像它当前点击
    • disabled将使按钮无法单击并显示渐变色。

    下面是在站点或 app 中使用图标的通用语法:

    <i class="icon_class_name"></i>

    引用链接: <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    各图标详情介绍戳这里!

    一个比较实用的东东,可以写在类似于按钮里面。下面附一段代码和其效果图。

    QQ%E6%88%AA%E5%9B%BE20180808165339 - 关于Bootstrap的一些基础东西

    关于Bootstrap,还有好多好多,慢慢探索吧。(o゚▽゚)o


    正因为生来什么都没有,因此我们能拥有一切。(o゚▽゚)o

    
    
    查看评论

    Post a new comment

    Post a new comment
    欢迎回来 , [ 修改 ]




    加载中……