Jadual Kandungan
Bootstrap 包的内容
下载 Bootstrap
Hello, world!
Bootstrap 浏览器/设备支持
表格类
, 和 类
基本的表格
上下文类
响应式表格
Rumah hujung hadapan web html tutorial Bootstrap 学习(1)_html/css_WEB-ITnose

Bootstrap 学习(1)_html/css_WEB-ITnose

Jun 24, 2016 am 11:34 AM

简介

  Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

Bootstrap 包的内容

  • 基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
  • CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
  • 组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
  • JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在Bootstrap 插件 部分详细讲解。

     

  • 定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

     

  • 下载 Bootstrap

    您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时,您将看到如下所示的网页:

    您会看到两个按钮:

  • Download Bootstrap:下载 Bootstrap。点击该按钮,您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
  • Download Source:下载源代码。点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
  •  

    引入所需的js和css文件

    <!-- 新 Bootstrap 核心 CSS 文件 --><link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"><!-- 可选的Bootstrap主题文件(一般不使用) --><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    Salin selepas log masuk

      注意:Jquey的文件必须在bootstrap.min.js之前引入、

    第一个例子,Hello World

    <!DOCTYPE html><html><head>   <title>在线尝试 Bootstrap 实例</title>   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head><body>      <h1 id="Hello-world">Hello, world!</h1></body></html>            
    Salin selepas log masuk

    Bootstrap 浏览器/设备支持

      Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。

      旧的浏览器可能无法很好的支持。

      下表为 Bootstrap 支持最新版本的浏览器和平台:

    ChromeChrome FirefoxFirefox IEIE OperaOpera SafariSafari
    Android YES YES 不适用 NO 不适用
    iOS YES 不适用 不适用 NO YES
    Mac OS X YES YES 不适用 YES YES
    Windows YES YES YES* YES NO

    * Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

    Bootstrap 表格

    Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:

    标签 描述
    ),用来标识表格列。)。 内使用。
    为表格添加基础样式。
    表格标题行的容器元素(
    表格主体中的表格行的容器元素(
    一组出现在单行上的表格单元格的容器元素()。
    默认的表格单元格。
    特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在
    关于表格存储内容的描述或总结。

    表格类

    下表样式可用于表格中:

    类 描述 , 、
    .table 为任意 添加基本样式 (只有横向分隔线) 内添加斑马线形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态
    .table-striped
    .table-bordered 为所有表格的单元格添加边框
    .table-hover
    .table-condensed 让表格更加紧凑
    联合使用所有表格类

    下表的类可用于表格的行或者单元格:

    类 描述
    .active 将悬停的颜色应用在行或者单元格上
    .success 表示成功的操作
    .info 表示信息变化的操作
    .warning 表示一个警告的操作
    .danger 表示一个危险的操作

    基本的表格

    如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:

    <!DOCTYPE html><html><head>   <title>Bootstrap 实例 - 基本的表格</title>   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">   <script src="/scripts/jquery.min.js"></script>   <script src="/bootstrap/js/bootstrap.min.js"></script></head><body><table class="table">   <caption>基本的表格布局</caption>   <thead>      <tr>         <th>名称</th>         <th>城市</th>      </tr>   </thead>   <tbody>      <tr>         <td>Tanmay</td>         <td>Bangalore</td>      </tr>      <tr>         <td>Sachin</td>         <td>Mumbai</td>      </tr>   </tbody></table></body></html>
    Salin selepas log masuk

    结果如下

    上下文类

    下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

    类类 描述描述描述
    .active 对某一特定的行或单元格应用悬停颜色
    .success 表示一个成功的或积极的动作
    .warning 表示一个需要注意的警告
    .danger 表示一个危险的或潜在的负面动作

    这些类可被应用到

    <!DOCTYPE html><html><head>   <title>Bootstrap 实例 - 上下文类</title>   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">   <script src="/scripts/jquery.min.js"></script>   <script src="/bootstrap/js/bootstrap.min.js"></script></head><body><table class="table">   <caption>上下文表格布局</caption>   <thead>      <tr>         <th>产品</th>         <th>付款日期</th>         <th>状态</th>      </tr>   </thead>   <tbody>      <tr class="active">         <td>产品1</td>         <td>23/11/2013</td>         <td>待发货</td>      </tr>      <tr class="success">         <td>产品2</td>         <td>10/11/2013</td>         <td>发货中</td>      </tr>      <tr  class="warning">         <td>产品3</td>         <td>20/10/2013</td>         <td>待确认</td>      </tr>      <tr  class="danger">         <td>产品4</td>         <td>20/10/2013</td>         <td>已退货</td>      </tr>   </tbody></table></body></html>
    Salin selepas log masuk

    结果如下图所示:

    响应式表格

    通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

    <!DOCTYPE html><html><head>   <title>Bootstrap 实例 - 响应式表格</title>   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">   <script src="/scripts/jquery.min.js"></script>   <script src="/bootstrap/js/bootstrap.min.js"></script></head><body><div class="table-responsive">   <table class="table">      <caption>响应式表格布局</caption>      <thead>         <tr>            <th>产品</th>            <th>付款日期</th>            <th>状态</th>         </tr>      </thead>      <tbody>         <tr>            <td>产品1</td>            <td>23/11/2013</td>            <td>待发货</td>         </tr>         <tr>            <td>产品2</td>            <td>10/11/2013</td>            <td>发货中</td>         </tr>         <tr>            <td>产品3</td>            <td>20/10/2013</td>            <td>待确认</td>         </tr>         <tr>            <td>产品4</td>            <td>20/10/2013</td>            <td>已退货</td>         </tr>      </tbody>   </table></div>      </body></html>
    Salin selepas log masuk

    结果如下:

     

    按钮、在页面插入代码可看:

      致谢:感谢您的阅读!

    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

    Alat AI Hot

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    AI Hentai Generator

    AI Hentai Generator

    Menjana ai hentai secara percuma.

    Alat panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

    Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

    Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

    Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

    Adakah HTML mudah belajar untuk pemula? Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

    HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

    Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

    Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

    Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

    Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

    Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Mar 20, 2025 pm 05:56 PM

    Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

    Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

    HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

    Apakah contoh tag permulaan dalam html? Apakah contoh tag permulaan dalam html? Apr 06, 2025 am 12:04 AM

    Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

    See all articles