BootStrap

最新推荐文章于 2022-07-28 11:57:07 发布

原创最新推荐文章于 2022-07-28 11:57:07 发布 · 637 阅读

0 ·

CC 4.0 BY-SA版权

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

Bootstrap是一款非常流行的前端框架，由Twitter开发，支持HTML、CSS和JS，适用于移动设备并兼容PC端。该框架的主要特点包括响应式布局、跨设备及浏览器兼容性、丰富的组件库等。

Bootstrap介绍

html5的一个最为流行的框架，是Twitter的两名技术工程师研发的一个基于html、css、js的开源框架，移动端优先，兼容PC端。最重要的部分是响应式布局。

bootstrap的特点

1、跨设备、跨浏览器
2、响应式布局
3、提供全面的组件
4、内置jquery（js的一个库）插件
5、支持html5和css3
6、支持.less动态样式

下载bootstrap

http://www.bootcss.com/
在页面中的link script

bootstrap的总体

全局的字体大小是14px 所有的字体颜色是#333

bootstrap的标题

h1到h6都被改变了样式
h1到h6中间可以加一个small标签，会出现小版的h1到h6

如果只是想给一个标签加上h1的效果

<span class="h1">dsdsd</span>

上面的代码也可以实现h1的效果

bootstrap的内联文本元素

添加标记 mark
各种加线条的文本 del(和s标签是一个效果) ins(和u是一个效果加了一个下划线)
各种强调的文本 small strong em
文字的对齐的方式

<p class="text-left">sasa</p>
<p class="text-center">sasa</p>
<p class="text-right">sasa</p>

引用文本
左边多了一个5像素的线条

<blockquote>sasasa</blockquote>

加上这个类以后就居右了 blockquote-reverse
移除列表的默认样式

<ul class="list-unstyled">
    <li>sasa</li>
    <li>sasa</li>
</ul>

将列表设置为内联

<ul class="list-unstyled list-inline">
    <li>sasa</li>
    <li>sasa</li>
</ul>

bootstrap的表格和按钮

bootstrap的表格

为table加一个类 class=table

<table  class="table">
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>50</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>女</td>
        <td>48</td>
    </tr>
    <tr>
        <td>3</td>
        <td>张三</td>
        <td>男</td>
        <td>50</td>
    </tr>
    <tr>
        <td>4</td>
        <td>张三</td>
        <td>男</td>
        <td>50</td>
    </tr>
    </thead>
</table>

注意的是table有一个thead和一个tbody
下边的所有的样式都必须是基于table类的。
1、让tbody里边的行产生一行隔一行的单色背景

2、为表格增加边框

3、鼠标悬停的时候的效果

4、状态类作用于每一行所以写在tr中

5、隐藏某一行或者某一列
实现的是隐藏标题
6、响应式表格
为body添加table-responsive类就会将table变为响应式的表格

bootstrap按钮

将a设置为按钮
下边的所有的样式都必须是基于btn类的，而且必须为按钮设置为一个样式 btn btn-info btn btn-success btn-danger btn-primary
btn-warning
这里写图片描述
1、将按钮设置为默认的样式
sasa input也可以最好的标签就是button更好的符合他的语义
2、同样也可以根据信息来设置按钮的样式
sasa
3、设置按钮的大小
dsdsd
4、块级的按钮
dsdsd
5、禁用按钮
class=”disabled”

bootstrap中表单和图片

bootstrap中表单

表单分组

为表单中input添加class=”form-control”可以将input变为块级
用一个div包装并且加上class=”form-group”实现表单的分组

 <div class="form-group">
    <label>电子邮件</label>
    <input type="email" placeholder="请输入您的电子邮件" class="form-control">
    </div>

内联表单

位form表单添加类form-inline
会自动的检测屏幕的分辨率是否>768，当小于768的时候，就会变为块状的表单