您现在的位置是:首页 > 个人日记个人日记

Bootstrap简单讲解-1

kerry2019-06-04【个人日记】人已围观

简介关于Bootstrap简单的了解和介绍,Web前端框架,自适应wap,Bootstrap,PHP,PHP函数,面试,PHP面试,巴斯手制加盟,巴斯手制,ThinkPHP,Bootstrap表格,栅格系统(grid)

Bootstrap算是一个比较实用的前端框架了,提供了很多组件,比如说轮播图,栅格系统(grid),表单等,可以说还是比较实用的。今天我们就简单的来讲一下这个框架

一,Bootstrap是Twitter公司推出的用于前端开发的框架(工具包),
      官网:https://getbootstrap.com/
      中文:http://www.bootcss.com/https://v3.bootcss.com/
      下载:http://v3.bootcss.com/getting-started/#download、composer require twbs/bootstrap
二,Bootstrap引入是需要注意的地方
      head标签中要先引入: <meta charset="utf-8">
                                          <meta http-equiv="X-UA-Compatible" content="IE=edge">
                                          <meta name="viewport" content="width=device-width, initial-scale=1">
      然后后面引入CSS文件:bootstrap.css
      最后引入JS文件:jquery.js和bootstrap.js。注意引入js文件的时候要把jquery放在前面,否则bootstrap.js不生效。
三,
开始讲一些基础的用法
      首先先说一下用到的颜色样式,一共有6种。分别是:default  默认样式(浅绿色)、warning  警告(橙色)、success  成功()、info 提示() 、primary 基础()、danger  危险()。
      第一个先说按钮Bootstrap中btn组件
      它的格式是:<标签 class="btn btn-样式 btn-尺寸">文字</标签>,
      class样式是:按钮颜色就是上面说的6中颜色样式,比如btn-default 这样编写就行。再次就是按钮尺寸分为:btn-sm 小按钮、btn-xs  超小按钮,btn-lg 大按钮、btn-block 块级按钮
      效果图和代码:
      
 
<div style="text-align: center;width: 100%;height: auto;margin-top: 300px;">
        <li class="btn btn-danger btn-sm">样式:btn-danger btn-sm</li>
        <li class="btn btn-default btn-sm">样式:btn-default btn-xm</li>
        <li class="btn btn-warning btn-sm">样式:btn-warning btn-lg</li>
        <br>
        <li class="btn btn-success btn-sm">样式:btn-success btn-block</li>
        <li class="btn btn-info btn-sm">样式:btn-info</li>
        <li class="btn btn-primary btn-sm">样式:btn-primary</li>
    </div>
现在来演示Bootstrap中img组件
首先标签格式:<img class="img-样式" src="..">
class样式分为四种:圆形img-circle、img-rounded圆片半角、略缩图img-thumbnail、响应式img-responsive
效果图和代码:

<div style="margin: 300px;">
        <img class="img-circle" src="mukangbei3.jpg">
        <img class="img-rounded" src="mukangbei3.jpg">
        <img class="img-thumbnail" src="mukangbei3.jpg">
        <img class="img-responsive" src="mukangbei3.jpg">
    </div>
Bootstrap中table表格组件:
标签格式;<div class=" table-responsive">
                   <table class="table table-bordered table-condensed table-hover table-striped">

属性:table-striped代表斑马线、table-responsive表格自适应、table-condensed表格尺寸略缩、table-bordered加边框、table-hover鼠标悬停高亮样式
效果图和代码:

<div class="table-responsive" style="margin: 200px;width: 25%;text-align: center;">
            <table class="table table-bordered table-condensed table-hover table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>邮箱</th>
                        <th>手机号</th>
                        <th>菜单</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>0</td>
                        <td>小杨</td>
                        <td>y@qq.gom</td>
                        <td>234232</td>
                        <td>
                            <a href="#" class="btn btn-info">编辑</a>
                            <a href="#" class="btn btn-danger">删除</a>
                            <a href="#" class="btn btn-warning">查看</a>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>小雨</td>
                        <td>y@qq.gom</td>
                        <td>234232</td>
                        <td>
                            <a href="#" class="btn btn-info">编辑</a>
                            <a href="#" class="btn btn-danger">删除</a>
                            <a href="#" class="btn btn-warning">查看</a>
                        </td>
                    </tr>
                </tbody>
            </table>
      </div>
ps:今天就先讲这么多剩下明天讲!喜欢甜品的请点击《巴斯手制》!

Tags:Web前端框架   自适应wap   Bootstrap   PHP   PHP函数   面试   PHP面试   巴斯手制加盟   巴斯手制   ThinkPHP

很赞哦! ()

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

站点信息

  • 建站时间:2018-7-7
  • 网站程序:帝国CMS7.5
  • 文章统计38篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们