对bootstrap框架的一些测试(1)

bootstrap是一款优秀的前端开发框架,又美国twitter公司的设计师Mark和Jacob合作基于HTML,CSS,JS开发的简洁,直观,强悍的前端框架。

首先理解一下bootstrap的栅格系统。

bootstrap的栅格系统,默认将整个屏幕放在一个“container”容器中,然后以row为子元素,将‘col‘作为直接子元素,把整个屏幕分成12份,然后对每一份进行操作。

对文本进行操作

<!DOCTYPE  HTML>
<html>
<header>
    <meta  charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title>Hello,world</title>
    <link type="text/css"  rel="stylesheet"  href="./css/bootstrap-theme.css">
    <link type="text/css"  rel="stylesheet"  href="./css/bootstrap.css">
    <link  type="text/css"  rel="stylesheet"  href="./fonts">
    <script src="js/bootstrap.js"></script>
    <script  src="js/npm.js"></script>
</header>
<body>
<div  class="container">
<div  class="row">
<div  class="col-md-8">
    <h1>Hello,world</h1>
    <h2>Hello,world</h2>
    <h1>Hello,world<small>Hello,World</small></h1>
    <p>Nullam quis risus eget urna mollis <em>ornare vel</em> eu <strong>leo. Cum sociis</strong> natoque penatibus et magnis dis<u> parturient montes, nascetur</u> ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

    <p class="lead  text-center">Cum sociis natoque penatibus et magnis</p> dis <abbr  title="parturient">partu</abbr> montes, nascetur <ins>ridiculus mus. Donec</ins> ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

    Maecenas <mark>sed diam</mark> eget <del>risus varius</del> blandit <s>sit amet</s> non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
    <p  class="text-right">lam quis risus eget urna mollis</p>


</div>

</div>
</body>

</html>

我上面这段代码产生的结果为:

我这段代码按道理讲是应该不支持响应式的,怎样理解呢?首先我们来理解一下bootstrap官方文档中的一句话:

栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类

不知道大家对这句话使怎么理解的,很显然,当我上面的代码在超小屏幕上执行时,我的栅格系统并不会起作用,原因就是“我上面的代码中,对小屏幕并没有进行任何设置,所以它会默认成占满整个屏幕”。

说完这一段,大家应该能够理解了吧。栅格系统只会对屏幕比像素切割点更大的屏幕起作用,在比切割点更小的地方并不会起作用,二是占满整个屏幕。 在bootstrap中,对文本一共可以设置到六级标题:

<h1></h1>
....
<h6></h6>

可以使用small内联标签,对文本进行缩小(可以设置为副标题),使用em标签进行斜体标记,使用html内置的strong标签,进行文本强调;使用class=“lead”进行强调,使用u标签进行下划线标记(或者使用ins标签),使用class=“text-center”进行文本居中。使用<abbr title="***"></abbr>进行缩减显示。使用s或者del标签进行删除线标记,使用mark标签进行底部高亮。使用<code>进行单行代码,使用pre标签设置多行代码。使用class=“text-right“进行文本居右设置

表格

<!DOCTYPE  HTML>
<html>
<header>
    <meta  charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title>Hello,world</title>
    <link type="text/css"  rel="stylesheet"  href="./css/bootstrap-theme.css">
    <link type="text/css"  rel="stylesheet"  href="./css/bootstrap.css">
    <link  type="text/css"  rel="stylesheet"  href="./fonts">
    <script src="js/bootstrap.js"></script>
    <script  src="js/npm.js"></script>
</header>
<body>
<div  class="container">
<div  class="row">
<div  class="col-md-8  col-sm-4">
    <h1>Hello,world</h1>
    <h2>Hello,world</h2>
    <h1>Hello,world<small>Hello,World</small></h1>
    <p>Nullam quis risus eget urna mollis <em>ornare vel</em> eu <strong>leo. Cum sociis</strong> natoque penatibus et magnis dis<u> parturient montes, nascetur</u> ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

    <p class="lead  text-center">Cum sociis natoque penatibus et magnis</p> dis <abbr  title="parturient">partu</abbr> montes, nascetur <ins>ridiculus mus. Donec</ins> ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

    Maecenas <mark>sed diam</mark> eget <del>risus varius</del> blandit <s>sit amet</s> non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
    <p  class="text-right">lam quis risus eget urna mollis</p>


</div>


</div>
</body>

</html>

结果:

将整个行分为了两个部分,8,4分,所以表格只占左边的1/3。

对表格的一些操作为:

(在介绍之前,我想说一些html中的div元素。 这个元素是一个块级元素,对他的理解可以使用,content,margin,padding,border四者来说明。这是个概念需要了解清楚)

在做table时,基本格式为:

<table  class="table">
<tr>
<td>
</td>
</tr>
......
</table>

对table可以使用class分别为”table“,”table-bordered“等等进行这个表格的设置,比如是否拥有表格外侧的分割线,以及一些上色等等。

表单

我的代码:

<!DOCTYPE  HTML>
<html>
<header>
    <meta  charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title>Hello,world</title>
    <link type="text/css"  rel="stylesheet"  href="./css/bootstrap-theme.css">
    <link type="text/css"  rel="stylesheet"  href="./css/bootstrap.css">
    <link  type="text/css"  rel="stylesheet"  href="./fonts">
    <script src="js/bootstrap.js"></script>
    <script  src="js/npm.js"></script>
</header>
<body>
<div  class="container">
<div  class="row">
<div  class="col-md-8  col-sm-4">
    <h1>Hello,world</h1>
    <h2>Hello,world</h2>
    <h1>Hello,world<small>Hello,World</small></h1>
    <p>Nullam quis risus eget urna mollis <em>ornare vel</em> eu <strong>leo. Cum sociis</strong> natoque penatibus et magnis dis<u> parturient montes, nascetur</u> ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

    <p class="lead  text-center">Cum sociis natoque penatibus et magnis</p> dis <abbr  title="parturient">partu</abbr> montes, nascetur <ins>ridiculus mus. Donec</ins> ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

    Maecenas <mark>sed diam</mark> eget <del>risus varius</del> blandit <s>sit amet</s> non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
    <p  class="text-right">lam quis risus eget urna mollis</p>


</div>
<div  class="col-md-4">
    <table  class="table">

        <tr>
            <td  class="danger">
                admin1
            </td>

            <td>
                admin2
            </td>

            <td   class="danger">
                admin3
            </td>

        </tr>


        <tr>
            <td>
                admin1
            </td>

            <td>
                admin2
            </td>

            <td>
                admin3
            </td>

        </tr>

    </table>

</div>


<div  class="row">
    <div  class="col-md-8">
        <p  class="lead"><mark><u><ins>普通表单的设置</ins></u></mark></p>
        <form  action="">
            <div  class="form-group">
                <label  for="name">账号</label>
                <input   type="text"  id="name"  name="name" class="form-control">
            </div>
            <div  class="form-group">
                <label  for="passwd">密码</label>
                <input   type="password"  id="passwd" name="passwd" class="form-control" >
            </div>
            <div  class="form-group">
                <label  for="eamil">邮箱</label>
                <input  name="email"  id="eamil"   type="radio"  >
            </div>
            <div  class="form-group">
                <label  for="file">文件输入表单控制 </label>
                <input  name="file"  id="file"  type="file"   >
                <p  class="help-block">请上传图像文件</p>
            </div>
            <div  class="checkbox">
                <label><input   type="checkbox"  name="box">一个可选的框</label>
            </div>

            <button   type="submit" class="btn btn-default">请点击我</button>

            <button  type="reset" class="btn btn-primary">谢谢你点击我</button>
        </form>

        <p  class="lead"><mark>使表单变成水平控件</mark></p>
        <form  class="form-horizontal">
            <div  class="form-group">
            <label  for="name" class="col-md-2  control-label">账号</label>
                <div  class="col-md-10">
            <input  type="password"  id="name"  name="name" class="form-control">
                </div>
            </div>
            <div  class="form-group">
                <label  for="text1" class="control-label  col-md-2">输入文本框</label>
                <div  class="col-md-10">
                    <textarea  class="form-control"  rows="10"></textarea>
                </div>
            </div>
        </form>

        <p  class="lead"><mark>下拉选项</mark></p>
        <form>
            <div  class="form-group">
                <label>性别</label>
                <select    class="form-control">
                    <option>男</option>
                    <option>女</option>
                </select>
            </div>
        </form>



    </div>

    <div  class="col-md-4  col-sm-8">
        <p class="lead"><mark><ins>内联表单的设置</ins></mark></p>
        <form>
            <div  class="form-group">
                <label  for="name">账号</label>
                <div  class="input-group">
                    <div class="input-group-addon">$</div>
                <input  type="text"  id="name"  name="name" class="form-control">
                    <div  class="input-group-addon">&&&&&</div>
                </div>
            </div>

            <div  class="form-group">
                <label  for="passwd">密码:</label>
                <div  class="input-group">
                    <div  class="input-group-addon">
                    *
                    </div>
                    <input   name="passwd"  id="passwd"  class="form-control" type="password" >
                    <div   class="input-group-addon">
                        %
                    </div>
                </div>
            </div>
            <button   type="submit" class="btn btn-primary">提交</button>
        </form>
        <p  class="lead"><mark><ins>必须使用标签,可以使用“”sr-only来去掉</ins></mark></p>
        <form>
            <div  class="form-group">
                <label  for="name"  class="sr-only">账号</label>
                <div  class="input-group">
                    <div class="input-group-addon">@</div>
                    <input  name="name"  type="text"  id="name"  class="form-control">
                    <div  class="input-group-addon">&</div>
                </div>
                <div  class="form-group">
                    <label  for="passwd">密码</label>
                    <input  type="password"  id="passwd" name="passwd"  class="form-control">
                </div>
            </div>
        </form>

        <p class="lead"><mark><ins>对多选框和单选框的支持</ins></mark></p>


        <p><mark>在一行水平排列</mark></p>
        <div  class="radio">
            <label>
                <input  type="radio"  name="c1"  value="c1">
                多选1
            </label>
            <label>
            <input  type="radio"  name="c2"  value="c2">
                多选2
            </label>
        </div>
        <div  class="radio">
        <label>
                <input  type="radio"  name="c2" value="c3">
                单选3
            </label>
        </div>

        <div  class="checkbox">
        <label>
        <input  type="checkbox">
        单选1
        </label>
        </div>
        <div  class="checkbox">
        <label>
        <input  type="checkbox">
            单选2
        </label>
        </div>
  <div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>


    </div>


</div>

</div>
</body>

</html>

结果:


对表单的话,要说的东西实在是太多了。这里只是简单的提一下,如果需要更多的话,可以去bootstrap官网上查看官方文档,

首先,如果需要提交表单,请将整表单放在<form></form>中,每一项都需要放在form-group class中,如果需要内联input元素class的话,请将input放在form的里面,比如:

<form>
            <div  class="form-group">
                <label  for="name"  class="sr-only">账号</label>
                <div  class="input-group">
                    <div class="input-group-addon">@</div>
                    <input  name="name"  type="text"  id="name"  class="form-control">
                    <div  class="input-group-addon">&</div>
                </div>
                <div  class="form-group">
                    <label  for="passwd">密码</label>
                    <input  type="password"  id="passwd" name="passwd"  class="form-control">
                </div>
            </div>
        </form>

待续...

全文结束,欢迎在评论区讨论~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券