用户名
密码
侧边栏壁纸
  • 累计撰写 37 篇文章
  • 累计收到 10 条评论

Bootstrap

龙流
2021-04-28 / 0 评论 / 31 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年06月22日,已超过330天没有更新,若内容或图片失效,请留言反馈。

Bootstrap:

概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。
Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
    * 好处:
        1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
        2. **响应式布局**
            * 同一套页面可以兼容不同分辨率的设备。
快速入门
    1. 下载Bootstrap及文档手册(www.bootcss.com)
    2. 在项目中将这三个(css、fonts、js)文件夹复制
    3. 创建html页面,引入必要的资源文件

栅格系统:

概念:将一行平均分成12个格子,可以指定元素占几个格子
通过给不同的元素设置规定好的样式,即可识别在不同的设备中元素占多少格
    * 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目
        * 设备代号:
            1. xs:超小屏幕 手机 (<768px):col-xs-12
            2. sm:小屏幕 平板 (≥768px)
            3. md:中等屏幕 桌面显示器 (≥992px)
            4. lg:大屏幕 大桌面显示器 (≥1200px)
       * 注意:
        1. 一行中如果格子数目超过12,则超出部分自动换行。
        2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
        3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。

栅格实例:使用lg标记元素:在大屏幕中与小屏幕显示的区别

<body>
    <!--定义容器,使用container或container-fluid属性标记-->
    <div class="container-fluid">
        <!--定义行,使用row属性标记-->
        <div class="row">
            <!--定义元素-->
            <!--
            col-lg-1:介绍一下最后的-1的作用,栅格系统中一行默认12个格子,
            -1就是在这个标记下就可以允许一行容下12个-1的格子。
            尾号相加超过12的就会再占一行
           -->
            <div class="col-lg-1">lg-1占一格</div>
            <div class="col-lg-1">lg-1占一格</div>
            <div class="col-lg-1">lg-1占一格</div>
           <div class="col-lg-1">lg-1占一格</div>
           <div class="col-lg-1">lg-1占一格</div>
           <div class="col-lg-1">lg-1占一格</div>
           <div class="col-lg-1">lg-1占一格</div>
           <div class="col-lg-1">lg-1占一格</div>
           <div class="col-lg-1">lg-1占一格</div>
           <div class="col-lg-1">lg-1占一格</div>
           <div class="col-lg-1">lg-1占一格</div>
           <div class="col-lg-1">lg-1占一格</div>
        </div>
    </div>
</body>

效果图

栅格系统col-lg-1.png

屏幕缩小后

栅格系统col-lg-1屏幕缩小.png

class可以同时使用多种屏幕的属性格式标记,它会自己判断当前屏幕下属于那个属性

<body>
    <!--定义容器,使用container或container-fluid属性标记-->
    <div class="container-fluid">
        <!--定义行,使用row属性标记-->
        <div class="row">
            <!--定义元素-->
            <!--
            col-lg-1:介绍一下最后的-1的作用,栅格系统中一行默认12个格子,
            -1就是在这个标记下就可以允许一行容下12个-1的格子。
            尾号相加超过12的就会再占一行
            col-sm-2:在992px-1200px屏幕之间,每个div在每行占2个栅格
            
            整体效果是:在1200px大屏幕中,每个div在每行占1个栅格;
            当屏幕缩小到992px-1200px中等屏幕之间时,每个div会变成在每行占2个栅格
            当屏幕小于992px小屏幕是,不会向下兼容,每个div占一行
           -->
           <div class="col-lg-1 col-sm-2">lg-1占一格</div>
           <div class="col-lg-1 col-sm-2">lg-1占一格</div>
           <div class="col-lg-1 col-sm-2">lg-1占一格</div>
           <div class="col-lg-1 col-sm-2">lg-1占一格</div>
           <div class="col-lg-1 col-sm-2">lg-1占一格</div>
           <div class="col-lg-1 col-sm-2">lg-1占一格</div>
           <div class="col-lg-1 col-sm-2">lg-1占一格</div>
           <div class="col-lg-1 col-sm-2">lg-1占一格</div>
           <div class="col-lg-1 col-sm-2">lg-1占一格</div>
           <div class="col-lg-1 col-sm-2">lg-1占一格</div>
           <div class="col-lg-1 col-sm-2">lg-1占一格</div>
           <div class="col-lg-1 col-sm-2">lg-1占一格</div>
        </div>
    </div>
</body>

效果图

栅格系统多设备属性设置.png

Bootstrap的全局样式,理解后见名知意

不同的标签,如果它们定义的Bootstrap的class样式是一样的,则它们的外形是一样的

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

效果图都是如下的:可以点击的按钮

Bootstrap按钮效果图.png

btn-default:按钮的默认风格;背景为白色
btn-primary:(首选项)Primary
btn-success:(成功)Success
btn-warning:(警告)Warning
btn-link:(链接)Link
0

评论 (0)

取消